1.插值

文本插值使用双大括号的形式:

{{ test }}

其中括号内的值会被解析成数据对象中的值，如果数据对象中的值发生变化，括号内的值也会联动发生变化

如果只需要渲染一次数据，后续的数据变化不再关心，则：

{{ *test }}

上述方式如果test的值是html片段，则会原封不动的替换，而不是替换成html的形式

如果要增加html解析的功能，则:

{{{ test }}}

例子:假设 test = <p>这是一个段落</p> {{{ test }}} =====>会渲染成真实的html： 这是一个段落 {{ test }} =======>会直接替换成字符串：<p>这是一个段落</p>

同时，双大括号还可以在标签内使用：

<div class = '{{ test }}'></div>

同时，双大括号同时也接收表达式，包含js表达式和过滤器

<!--JS表达式--> {{ true : 1 ? 0 }} {{ str.split(',') }} <!--管道filter--> {{ example | toUpperCase }} ===>这里的toUpperCase 就是过滤器，是指是一个函数，返回全大写 {{ example | filterA | filterB }} ====>允许过滤器串联 {{ example | filterA a b }} ====>允许传入参数 a b 用空格隔开

但是如果大括号内不是多条语句或者声明语句，而不是表达式，则不支持:

<!--JS无效格式--> {{ var log = '123' }} ====> 这是语句，不是表达式，不起作用 {{ if(true) { str } else { str1 } }} ====>虽然if else中的是字符串的变量，但是这个不是一个表达式，而是一段语句

2.指令

指令是带有v-前缀的特殊属性，其值绑定了数据对象中的值或者表达式

(1) v-if

v-if指令可以完全根据表达式的值来在dom中生成或者移除一个元素（false移除，true添加） 注意：如果含有v-if属性的标签还有子标签，会一并添加或者移除

<template> <div class="about"> <div v-if="isDisplay"> <p>显示内容</p> <button @click="switchDiv">隐藏</button> </div> </div> </template> <script> export default { name: 'test', data () { return { isDisplay:true } }, methods:{ switchDiv:function(){ this.isDisplay = false; } } } </script>

(2) v-show

v-show指令是根据响应数据的值来显示和隐藏HTML元素，比如： v-show的赋值为false的时候，元素上会多一个内联样式：style = 'display: none ' v-show和v-if的区别在于v-show是通过css来控制，无论true或者false，这个HTML元素都会存在于DOM中

总结： v-if是惰性的，只有true的时候才会被编译,会有很高的切换消耗 v-show元素始终被保留，会有很高的初始渲染消耗

(3) v-model

用来在表单控件是实现数据的双向绑定(具体每个标签略)

在默认情况下，v-model中的数据会与数据实时同步，但是可以使用lazy数据将其改到change事件上来：

<!-- 通过添加lazy属性，在input更改的值会在用户输入enter或者离开光标后才会刷新 --> <input type='text' v-model='msg' lazy> {{ msg }}

当然也可以使用debounce属性来设置一个最小延时，每次更改数据后延时指定时间后菜户同步刷新数据

<!-- --> <input type='text' v-model='msg' debounce = '50000'> {{ msg }}

(4)v-for

基于源数据重复渲染元素：

<ul> <!--customer of customers也可以--> <li v-for = '(customer,index) in customers' :id = 'index'> {{ customer.name }} {{ $index }} //呈现数据索引(customers中的第几个元素) {{ id }} //和$index的方式类似 </li> </ul>

v-for不仅可以渲染数组，还可以渲染对象：

<ul> <!--customer of customers也可以--> <!-- object:{ first: 'x', second: 'y' } --> <li v-for = 'value in object' > {{ vaule }} //会依次输出x和y </li> </ul>

(5)v-text

更新元素的textContent

<span v-text = 'msg'></span> 等价于 <span>{{ msg }}</span>

(6) v-html

更新元素的innerHTML,即： {{{ content }}} 等价于 v-html = ‘content’

(7) v-bind

强制将html的属性值绑定至vue数据对象中 v-bind:src = ‘content’ 等价于 :src = ‘content’

<p :class = 'somthing'></p> <!--双向绑定--> <p :class.sync = 'something'> </p> <!--单次绑定--> <p :class.one= 'something'></p>

3.自定义vue语法

VUE中数据绑定的语法是可以自定义的，src/config.js文件中包含了一些语法格式，例如:

原文件src/config.js： let delimiters = ['{{','}}'] let unsafeDelimiters = ['{{{','}}}'] 我们可以在main.js中更改： Vue.config.delimters = ['<%','%>'] 如果更改成这个，以后数据绑定的代码为: <% test %>

4.过滤器filter

export default { name: 'app', data () { return { msg: 'Welcome ' } }, //定义filter filters: { reverse: function(val){ return val + 'filter' } } } <!--使用filter--> <div id='app'> <!--会输出Welcomefilter--> {{ msg | reverse }} </div>

过滤器是支持串联的： {{ value | filterA | filterB … }} 在过滤器内是没有this引用的，即： this ==undefined

5.vue脚手架vue-cli

使用npm安装vue-cli:

npm i vue-cli -g

进入对应目录创建项目：

vue init webpack my-project

列出所有可以使用的模板：

vue list

开发环境下运行vue 这个指令是在package.json的script属性设置的，实质上是由npm引导执行入口程序dev-server.js来完成加载过程

npm run dev

生产环境编译

npm run build

6.webpack的基本用法(自定义配置)

(1)在开发过程中有一些包是需要下载到本地使用的(npm中不存在),我们在项目中就需要引用一段很长的文件路径

import Selector from ../../../../bower_test/select.....

我们可以通过webpack的resolve来配置长路径或者…/这些相对路径,在webpack.base.config.js中：

modult.export = { entry: {}. ..... resolve: { extensions: ['','.js'], alias: { //使用别名来代替一些长路径或者比较常出现的长字符 'bs-select': '长路径' '~': '../' } } }

(2)配置多入口程序

在一个项目中的程序入口一般不只有一个,所以需要增加多个类似main.js的入口文件

/index请求index.html /admin请求admin.html 这些入口js文件会被生成至启动页的script标签内 在build/webpack.base.conf.js文件中：

module.export = { entry: { //app、admin这些名称可以在后面定义HtmlWebpackPlugin中使用 app: './src/main.js', admin: './src/admin-main.js' } }

webpack中的HtmlWebpackPlugin插件用于生成html入口页面并将js和css文件的引用地址写入到入口html中的对应位置 在build/webpack.base.conf.js文件中：

new HtmlWebpackPlugin({ filename: 'admin.html', template: 'admin.html', inject: true, //要与entry一致 chunks: ['admin'] }),

如果需要将上面的admin-main生成在另一个html入口页，则需要再多配置一个HtmlWebpackPlugin对象，其中的chunks必须使用在entry中定义的admin 最后：build/webpack.prod.conf.js文件中增加

module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), admin: path.resolve(__dirname, 'admin.html'), ..... } }

最后访问/index和/admin则是两个不同的入口页面