vue.js学习
Posted 花娣丫头小愤青
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js学习相关的知识，希望对你有一定的参考价值。
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。MVVM框架
Vue.js的目的：1、解决数据绑定的问题 2、开发Single Page Application(SPA)大型单页面应用。主要支持移动端，也支持PC端。 3、支持组件化，这样复用度高
MVVM模式：
M：model 业务模型，用处：处理数据，提供数据
V： view 用户界面、用户界面
M->V V->M
Vue.js 使用了基于 html 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
使用Vue.js步驟：1、引入Vue.js 2、创建一个Vue对象，其中el代表Vue管理对象的界限。data是一个对象，用于存放显示在页面上的数据。
<!DOCTYPE html> <html> <head> <title>test01.html</title> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> var appT=new Vue({ el: \'#app\', data: { message: \'Hello Vue.js123!\' } }) </script> </body> </html>
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。
如果后台改动message时，相应的页面也会随之变化。使用appT.message=“XXX”更改。每个 Vue 实例都会代理其 data 对象里所有的属性
Vue指令，其实就是vue当中以v-开头的自定义属性。
1、使用 v-html 指令用于输出 html 代码：
<body> <div id="app" v-html="message"></div> <script> new Vue({ el: \'#app\', data: { message: \'<h1>使用V-html</h1>\' } }) </script> </body>
2、HTML 属性中的值应使用 v-bind 指令
<body> <div> <a id="app" v-bind:href="url">{{text}}</a> </div> <script> new Vue({ el: \'#app\', data: { url:\'http://www.baidu.com\', text:\'点击\' } }) </script> </body>
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
3、v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
<body> <div> <P id="app" v-if="seen">你看见我了！</P> </div> <script> var appT=new Vue({ el: \'#app\', data: { seen:true } }) </script> </body>
该元素模块不存在了
4、v-show指令用来决定是否显示元素
<body> <div id="app"> <p v-show="seen">你看见我了</p> </div> <script> var appT=new Vue({ el: \'#app\', data: { seen:true } }) </script> </body>
该元素模块被设置为display：none。
v-if跟v-show的区别：
v-if有更高的切换消耗，安全性更高。而v-show有更多的初始化渲染消耗。因此频繁切换而对安全性无要求可用v-show。如果在运行，条件不可改变，则用v-if比较好。
5、v-else必须跟在v-if后面，否则不能被识别。
<body> <div id="app"> <p v-if="seen">你看见我了</p> <p v-else>你看不见我了</p> </div> <script> var appT=new Vue({ el: \'#app\', data: { seen:true } }) </script>
6、v-else-if
<body> <div id="app"> <p v-if="type===\'A\'">A</p> <p v-else-if="type===\'B\'">B</p> <P v-else>C</P> </div> <script> var appT=new Vue({ el: \'#app\', data: { type:\'A\' } }) </script> </body>
7、在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
<body> <div id="app"> <p>{{message}}</p> <input v-model="message"> </div> <script> var appT=new Vue({ el: \'#app\', data: { message:\'hello world\' } }) </script> </body>
也就是说页面输入改动，对应的data数据也跟着改动
8、循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<body> <div id="app"> <ui> <li v-for="person in persons"> {{person.name}}, {{person.old}}, {{person.sex}} </li> </ui> </div> <script> var appT=new Vue({ el: \'#app\', data: { persons:[ {name:\'wang1\',old:\'20\',sex:\'male\'}, {name:\'wang2\',old:\'21\',sex:\'female\'} ] } }) </script> </body>
9、v-for 可以通过一个对象的属性来迭代数据：
<body> <div id="app"> <ui> <li v-for="value in person1"> {{value}} </li> </ui> --------------------------------------- <oi> <li v-for="(value,key) in person2"> {{key}} --- {{value}} </li> </oi> --------------------------------------- <ui> <li v-for="(value,key,index) in person3"> {{index}}---{{key}}---{{value}} </li> </ui> </div> <script> var appT=new Vue({ el: \'#app\', data: { person1:{name1:\'wang1\',old1:\'20\',sex1:\'male\'}, person2:{name2:\'wang2\',old2:\'30\',sex2:\'female\'}, person3:{name3:\'wang3\',old3:\'40\',sex3:\'male\'} } }) </script> </body>
10、v-for 也可以循环整数
<body> <div id="app"> <ui> <li v-for="n in 10"> {{n}} </li> </ui> </div> <script> var appT=new Vue({ el: \'#app\', data: {} }) </script> </body>
11、Vue.js 计算属性
<body> <div id="app"> 直接逻辑：{{ message.split(\'\').reverse().join(\'\') }}<br> 计算属性关键字computed：{{reverseMessage1}} <br> method：{{reverseMessage2()}} </div> <script> var appT=new Vue({ el: \'#app\', data: { message:\'HelloWorld!\' }, computed:{ reverseMessage1:function(){ return this.message.split(\'\').reverse().join(\'\') } }, methods:{ reverseMessage2:function(){ return this.message.split(\'\').reverse().join(\'\') } } }) </script> </body>
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
12、Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
<script type="text/javascript" src="vue.min.js"></script> <style type="text/css"> .active{ width:100px; height:100px; background:green; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:isActive}"></div> </div> <script> var appT=new Vue({ el: \'#app\', data: { isActive:true } }) </script>
我们也可以在对象中传入更多属性用来动态切换多个 class 。
<script type="text/javascript" src="vue.min.js"></script> <style type="text/css"> .active{ width:100px; height:100px; background:green; } .err{ width:20px; height:20px; background:red; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:isActive,\'err\':isErr}"></div> </div> <script> var appT=vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中