一、需要安装的插件：
jshint ：js代码规范检查
Beautify ：一键美化代码插件
Vetur: .vue 文件识别插件
Javascript(Es6) code snippets :Es6语法提示
Auto Rename Tag :自动命名标签，标签成对出现
Auto Close Tag: 自动闭合标签
vue helper :一些vue代码的快捷代码插件
vscode-icons:提供不同文件夹的显示区别
按下ctrl+k 在按下ctrl+s 可以查看快捷键
二、Vue模板语法
1.v-once加上之后不会改变原来的值
2.v-html读取变量的时候会当做HTML元素来解析
3.v-bind属性绑定，要读取vue.data中的属性，就要使用这个v-bind，也可以省略使用如：<img v-bind:src="logo" >或者<img :src="logo" >
小插曲：设置自己的代码快捷方式：
a.ctrl+shift+p 搜索snippets 点击第一个之后找到html.json打开
b.按照说明操作就可以了----zyb
4.绑定Class
a.通过数组的方式绑定：
<div id=‘app‘> <p v-bind:class="[pcl1,pcl2]">张三</p> </div> <script> new Vue({ el:‘#app‘, data:{ pcl1:"title", pcl2:"main-title", } }) </script>
b.通过对象的当时绑定：
<div id=‘app‘> <p :class="{title:strong1,‘main-title‘:strong2}">哈哈哈</p> <button @click="strong=true">文字加粗</button> </div> <script> new Vue({ el:‘#app‘, data:{ strong1:false, strong2:false } }) </script>
5.绑定Style：
a.用对象的方式绑定：
<div id=‘app‘> <p :style="{backgroundColor:backgroundColor}">我爱你，中国</p> </div> <script> new Vue({ el:‘#app‘, data:{ backgroundColor:"red" } }) </script>
b.通过数组的方式绑定：
<div id=‘app‘> <p :style="[pStyle1,pStyle2]">我爱你，中国</p> </div> <script> new Vue({ el:‘#app‘, data:{ backgroundColor:"red", pStyle1:{ ‘background-color‘:"blue", ‘font-size‘:"30px" }, pStyle2:{ ‘border-bottom‘:"20px solid #000" } } }) </script>
6.JavaScript表达式：
在属性绑定和变量读取中，可以使用表达式，常见的表达式有：变量读取，变量运算，三目运算符，函数调用，取反等。代码如下：
<div id=‘app‘> <div :style="{color:danger?‘red‘:‘black‘}">三目运算符执行：{{message.split(" ").reverse().join(" ")}}</div> <!--split分割，reverse翻转，join数据转字符串--> <div>调用方法的执行结果：{{greet()}}</div> <div>这个是！取反的：{{!istest}}</div> </div> <script> new Vue({ el:‘#app‘, data:{ //条件？条件成立的值：条件不成立的值---三目运算符 danger:true, message:"hello word", istest:true }, methods:{ greet(){ return "自己定义的函数要放在methods中," } } })
7.条件判断：有v-if,v-else-if,v-else。如果有多个元素渲染要用template标签，vue默认会重用相同标签，入过不想被重用加上key属性。
a.单个标签显示的：
<div id=‘app‘> <p v-if="tianqi==‘sun‘">钓鱼</p> <p v-else-if="tianqi==‘rain‘">打游戏</p> <p v-else>睡觉</p> </div> <script> new Vue({ el:‘#app‘, data:{ tianqi:"rain" } }) </script>
b.多个标签显示的：
<div id=‘app‘> <template v-if="age<18"> <p>第一个模板</p> <p>第二个模板</p> </template> <template v-else-if="age>=18"> <p>第三个模板</p> <p>第四个模板</p> </template> </div> <script> new Vue({ el:‘#app‘, data:{ age:4 } }) </script>
原文：https://www.cnblogs.com/Mr-Simple001/p/12074371.html