Vue框架

Vue框架的介绍

Vue框架是 渐进式 JavaScript 框架；只关注视图层；使用MVVM模式

Vue的实例

使用Vue需要在http://cn.vuejs.org/上进行下载，并在使用之前用导入；
Vue在使用的时候需要将对象new出来，需要传入选项对象，对象包含挂载元素，数据，模板，方法等；
el：挂载元素选择器
data：代理数据
methods:定义方法

	


	
	
	
	


	

		  //   v-model	一般用于表单元素(input)	双向数据绑定



		{{msg}}
		

		
	

事件绑定

v-on:click=“show()”

通过制作一个按钮点击转到指定网页来具体讲解

	


	
	
	
	


	

		一个连接
		

		一个连接
		

		一个按钮    //  v-on:click对show进行监听
		

		一个按钮 // @click是 v-on:click的简写
	

计算属性

Vue常用方法总结：

1. v-mode:

这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

	


hello {{somebody}}

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接跟着变。这就是双向数据绑定。

2.v-on:

v-on主要用来监听DOM事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【 @ 】

	div id="app">

3.v-bind:

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】

4. v-if：

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

yes

如果属性值ok为true，则显示。否则，不会渲染这个元素。

5. v-else：

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

yes
No

6. v-else-if：

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

	

A


B


C


Not A,B,C

7. v-show：

也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

	
hello world

v-show与v-if：

v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

8. v-for：

用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式

	
   //使用in，index是一个可选参数，表示当前项的索引
   //使用of

当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

9. v-text：

v-text主要用来更新textContent，可以等同于JS的text属性。

这两者等价：

{{msg}}

10. v-html：

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。