VUE数据绑定

1.直接架加载vue.js文件方式 <script src="vue.min.js"></script>...

2.npm前端包管理 安装vue    $ npm i vue --save-dev

---

<span>Text:{{text}}</span>  数据绑定 text变化

<span>Text:{{*text}}</span> 只渲染一次 ，接下来数据变化不再更新

{{text}} 双大括号   里面text当做字符串

{{{text}}} HTML代码段

<li data-id='{{text}}'><li> 双大括号还可以放到HTML标签里

---

支持简单的表达式     {{cents/100}}     {{true?1:0}}      {{example.split(",")}}

注：错误示例    var logo = 'asdas'   不是语句也不是表达式  

                         if(true) return 'asdass'   不支持条件控制语句可使用三元式

支持过滤符 {{example|toUppercase}} 

允许串联 {{example|filter1|filter2}}   

过滤器支持传入参数 {{example|filter a b}}

---

指令   v-前缀写法    例如

<div v-if="show">asd</div>  当 show为true时  显示   asd

指令参数写法   

 <a v-bind:href="url"></a>  <div v-on:click="action"></div>

---

分隔符配置   vue.js 数据绑定语法是可配置的    源码 src/config.js     

let delimiters = ['{{','}}']  文本   let unsateDelimiters = ['{{{','}}}']  HTML代码段

自定义  Vue.config.delimiters = ["<%","%>"]  

             Vue.config.unsateDelimiters= ["<$","$>"]

---

注：部分参考详见VUE.JS权威指南-电子工业出版社