VUE框架学习第一天

 第一步创建.html文件，通过以下方式引入VUE

​


​

1.声明式渲染

做一个简单的案例

  {{ message }}


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。这里的new Vue是声明一个vue的实例化对象，el是用于挂载需要管理的元素，这里被挂载需要管理的是id为app的div，data里面放的就是页面存放的数据。

2.vue的第一个指令v-bind

			
			
			
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			
		
		
	    

v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>:

3. v-if 条件循环

            
我是web2208示范班学员
		
		
		

这里seen是给v-if传的值，如果为true,p标签里面的内容就可以显示，如果seen为false，则p标签不会显示。

4. v-for指令

		
              
              	{item}} -->
				{{item}}
              
		
		
		

这里data函数返回一个数组，v-for遍历这个数组，item是当前的值，运用到了ES6中的for in和for of遍历数组的方法。

5. v-on指令

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

			
			{{num}}
            
			 增加
		

​


​

v-on是监听监听事件的变化，v-on：可以简写成@。其中add方法里面的this要加，因为this代表vue的实例 所有需要从data中拿的数据都要加this你才能拿到。

6.v-model指令

           {{msg}}
		   
		
		
		

这里给表单加了v-model指令，也也赋了msg，从而使h2中的内容和input框中的内容一样实现表单输入和应用状态之间的双向绑定。

7.Mustache语法

{{message}}	
{{firstName}},wang		
{{firstName + lastName}}	
{{1+1}}	

mustache（胡子语法） 语法，就是 双大括号 {{}}。
{{}} 里面可以写 变量 也可以写 表达式 ，也可以简单的运算。

8.v-once指令

          {{msg}}
		
		
		

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。

9.v-html指令

          {{url}}
		  
		
		
		

如果没有v-html指令，那么渲染的就是字符串，在某些时候我们不希望直接输出这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

10. v-text指令

	
			你也好
		
		
		

这里的h2标签里面的内容本来是“你也好”，但是加了v-text文本指令，所以h2的内容变成了message的值，变成“你好呀”。

11 . v-cloak指令

 
	
	
		
			{{msg}}
		
		
		

有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到的这个标签。在vue解析之前，div属性中有这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性，加载完成之后，css属性变成，元素显示出来。