使用vs2019写vue

VUe基础

1.用vs2019，创建空项目，然后右键，添加项，选择html；写html双击table快捷键，会自动开发弹出html通用模板：

2.将写好的html文件，右键单击，然后选择在浏览器中查看，就可以看到编译后的结果：

3.使用vue，要在第一行引用vue， <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 其他的具体基本应用见代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Vue基础</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="#app" class="app">{{message}}  <!--两个大括号,两个大（）里面的东西，就会被message所替代--><h2>{{school.name}}{{school.mobile}}</h2><ul><li>{{campus[0]}}</li>  <!--数组里面的第一个元素是0--><li>{{campus[1]}}</li><li>{{campus[2]}}</li><li>{{campus[3]}}</li></ul></div><script>var app = new Vue({//  el: "#app",    /*css文件里面#是Id的表示*/ 一般都是建议使用ID选择器// el:".app",  //lacss选择器的关键字是.el:"div", //标签选择器；data: {message: "你好，小黑!",school:{name: "黑马程序员",mobile:"848481818"},campus: ["北京校区","上海校区","广州校区","深圳校区"]}})</script>
</body>
</html>

（二）具体的Vue这么用

vue里面封装了很多很有用的指令，一般都是以 V- 来开头的，下边是主要用到的几个：

v-text：主要是设置文本。。v-text可以实现插入使用，具体实现算法看下边图片，注意使用拼接的时候，应该如何进行拼接

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>V-text指令</title>
</head>
<body><div id="app"><h2 v-text="message+'$$$加上的'">深圳</h2><h3 v-text="info">深圳</h3><h3>{{message}}####深圳</h3>  <!--想要使用插入类型的，就必须要用两个大括号的形式--></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data:{message: "黑马程序员",info:"前端与移动教研室"}})</script>
</body>
</html>

实际效果图

2.V-html标签当内容是文本的时候，他和v-text的作用一样，这个是当文本中出现的是html格式的时候，他会生成链接的格式，而 v-text 无论结果是什么，他都只会解析为文本。

<body><div id="app"><p v-text="content"></p><p v-html="content"></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data:{content: "<a href='https://www.baidu.com/'>百度链接</a>"//外边用了双引号，里面就只能用单引号了}})</script>
</body>
</html>

3. V-on 这个是主要用于绑定事件用的，常用的是单击，双击，鼠标移动事件，具体实现代码如下：

<body><div id="app"><input type="button" name="name" value="v-on 指令" v-on:click="doIt" /><br><input type="button" name="name" value="v-on 简写" @click="doIt" /><br><input type="button" name="name" value="双击事件" v-on:dblclick="doIt" /><br /><h2 @click="changeFood">{{food}}</h2></div><script>var app = new Vue({el: "#app",data: {food:"西兰花炒饭"},methods:{doIt: function () {alert("做it");},changeFood: function (){this.food+="好好吃哦！"}}})</script>
</body>

效果图如下：每次点击 “西兰花” 这几个字，都会出现好好吃。

4.用 Vue 来实现一个简单的计数器功能；最终效果图如下：（点击左边的数量 - ，点击右边的数量 + ），注意：在浏览器中，右键点击检测，然后选择 console 选项，就可以看到执行过的命令了，效果见图二

图二

实现代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>计数器</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><div class="input-num"><button @click="sub">-</button><span>{{num}}</span><button @click="add">+</button></div></div><script>var app = new Vue({el: "#app",data: { num:1 },methods:{add: function () {console.log("add");if (this.num < 10) {this.num++;}else {alert("别点了，已经是最大了");}},sub: function () {console.log("sub");if (this.num >0) {this.num--;}else {alert("别点了，已经到底了");}} }})</script></body>
</html>

5.V-show的功能主要是用于控制图片的隐藏或显示：具体操作是点击切换按钮，可以实现图片的隐藏或者显示：
实现代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>美景图</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><input type="button"   value="切换显示的状态" @click="changeIshow" /><img v-show="isShow" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592299228&di=1cdbca2b1805ab962a5a0b619b040de1&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="" /></div><script>var app = new Vue({el: "#app",data: {isShow: false},methods: {changeIshow: function () {this.isShow = !this.isShow;}}})</script>
</body>
</html>

实现后的效果图如下：

6.V-if 指令：和其他语言的if差不多，可是实现某一参数 true 和 false 选择的切换，具体示例代码实现如下：

<body><div id="app"><input type="button"    name="name" value="切换显示" @click="toggleIsShow"/><p v-if="isShow">黑马程序</p></div><script>var app = new Vue({el: "#app",data: {isShow: false},methods:{toggleIsShow: function () { this.isShow = !this.isShow; }} })      </script>
</body>

效果图：通过动态点击切换显示，可以实现黑马程序这几个字的出现和消失；

7.V-bind（bind绑定）是用来绑定属性的：具体代码和效果图如下：

<body><div id="app"><!-- alt标签是当图片无法正常显示的时候，用来显示的文字 --><img v-bind:src="imgSrc"  alt="" /> <br /><img v-bind:src="imgSrc" alt="" :title="imgTitle+'!!!!'" /></div><script>var app = new Vue({el:"#app",data:{imgSrc: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2446973552,1830588776&fm=26&gp=0.jpg",imgTitle:"黑马程序员",}})</script>
</body>

效果图：

7.Vue-for指令，和其他语法的for指令含义差不多，具体代码和效果如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Vue测试</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><ul><li v-for="(it,index) in arr">{{index+1}}黑马程序员校区：{{it}}</li></ul><br /><h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2><input type="button" name="name" value="添加数据" @click="add" /><input type="button" name="name" value="删除数据" @click="remove" /></div><script>var app = new Vue({el: "#app",data: {arr: ["北京", "上海", "广东"],vegetables: [{name:"西兰花炒饭"},{name:"爆炒茄汁"}]},methods: {add: function () {this.vegetables.push({ name: "正新鸡排" });},remove: function () {this.vegetables.shift();},}})</script>
</body>
</html>

效果图如下：

8.Vue的事件修饰符，补充 V-on 注意用 . 修饰符可以对事件进行限制。例如用.enter只有在点击回车键的时候才会触发；

<body><div id="app"><input type="button" name="name" value="点击" @click="doIt(6666,'老铁')" /><input type="text" @keyup.enter="sayHi" />  <!-- key。enter只有在敲击回车键的时候，才会触发SayHi函数 --></div><script>var app = new Vue({el: "#app",methods: {doIt: function (p1, p2) {console.log("do it");console.log(p1);console.log(p2);},sayHi: function () { alert("吃了没有"); }}})</script>
</body>

实际效果图如下所示：

9 .V-model 进行关联
具体代码如下

<body><div id="app"><input type="button" name="name" value="修改message" @click="setM" /><input type="text"  v-model="message" @keyup.enter="getM" /><h2>{{message}}</h2></div><script>var app = new Vue({el: "#app",data: {message:"黑马程序员"},methods: {getM: function () {alert(this.message);},setM: function () {this.message = "酷丁鱼";}}})</script>
</body>

最后的效果图：

参考文献

黑马程序员
感觉侵权。联系侵删