vue入门

介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

起步

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

模版语法

在节点中可以使用{ {}来获取到vue对象中data节点的数据，在节点的属性里面则不需要{{}},同时在模版语法中可以

使用些运算符，例如算数运算符，逻辑运算符

语法

1. v-cloak:网络较慢时,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面加载显示模版语法{{message}}可以使用 v-cloak 指令来解决这一问题。

   	<div id="app">
   		<p v-cloak>{{message}}</p>
   	</div>
   	<script>
   		var app=new Vue({
   			el:'#app',
   			data:{
   				message:'哈哈哈'
   				}		
   		})
   	</script>
   

       [v-cloak]{
           display: none;
       }
   

2. v-text:与模板语法相同,但是模板语法在加载时若网速不好会导致就浏览上出现{{message}}等等

       <div id="app">
               <p v-text="message"></p>
       </div>
       <script>
           var app=new Vue({
               el:'#app',
               data:{
                   message:'hahah',
                   }		
           })
       </script>
   

3. v-html:把文本里面的htm l标签进行解释 例如

   	<div id="app">
   			<p v-html="rawHtml"></p>
   	</div>
   	<script>
   		var app=new Vue({
   			el:'#app',
   			data:{
   				rawHtml:'<h1>这是一个h1标签</h1>'
   				}		
   		})
   	</script>
   

4. v-if:根据if后面的内容来判断是否需要加载当前节点

   <div id="app">
   			<p v-if="seen">{{message}}</p>
   	</div>
   	<script>
   		var app=new Vue({
   			el:'#app',
   			data:{
   				message:'哈哈哈',
   				seen:true
   				}		
   		})
   	</script>
   

5. v-bind:对html节点中的属性进行绑定，可以简写为:，例如，v-bind:class简写为:class

   	<div id="app">
   		<img v-bind:src="path"/>
   		<a :href="url">{{message}}</a>
   	</div>
   	<script>
   		var app=new Vue({
   			el:'#app',
   			data:{
   				message:'哈哈哈',
   				path:"https://pic.images.ac.cn/image/5e9fbee50e290.html",
   				url:"https://www.cnblogs.com/shibin90/p/10314517.html"
   				}		
   		})
   	</script>
   

6. v-on: 对html节点中的事件进行绑定，后面跟方法:可以简写为@，例如，v-on:click 简写为@click

   	<div id="app">
   		<button v-on:click="show()">{{message}}</button>
   		<button @click="show()">{{message}}</button>
   	</div>
   	<script>
   		var app=new Vue({
   			el:'#app',
   			data:{
   				message:'点击'
   				},
   			methods:{
   				show(){
   					alert(this.message);
   				}
   			}
   		})
   	</script>
   
   

   除了click事件，我们还可以定义其他的一些常用事件，如：

   mouseover：鼠标放上事件

   mouseout：鼠标移开事件

   change：内容改变

   dblclick：双击事件

   focus：聚焦事件

   blur：失去焦点事件

   还有很多，这里不一一列举了，有兴趣的童鞋可以自己研究一下，手动尝试一下。

7. v-model:双向绑定，监听器，会监听数据的变化，实时更新

   <div id="app">
   		<p >{{message}}</p>
   		<input type="text" v-model="message" />
   		<button @click="aaa()" v-text="message"></button>
   	</div>
   	<script>
   		var app=new Vue({
   			el:'#app',
   			data:{
   				message:'haha'
   				},
   			methods:{
   				aaa:function(){
   					alert(this.message);
   				}
   			}
   		})
   	</script>
   
   

8. v-for:根据数组循环当前节点，例如v-for="todo in todos", 其中todos就是数组，todo就是数组中的元素名称

   	<div id="app">
   		<ul>
   			<li v-for="message in list">{{message}}</li>
   		</ul>
   	</div>
   	<script>
   		var app=new Vue({	
   			el:'#app',
   			data:{
   				list:['111','22222','3333','44444']
   				}
   		})
   	</script>
   
   

   或

       <div id="app-4">
         <ol>
           <li v-for="todo in todos">
             {{ todo.text }}
           </li>
         </ol>
       </div>
       <script>
           var app4 = new Vue({
        		el: '#app-4',
               data: {
                   todos: [
                     { text: '学习 JavaScript' },
                     { text: '学习 Vue' },
                     { text: '整个牛项目' }
                   ]
                 }
       })
   	</script>
   
   

9. v-once 只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

   无论input中的属性怎样改变，v-once标签都不会改变 ( 日常开发常用)

   	<div id="app">
   		<span>Message: {{ msg }}</span>
   		<span v-once>这个将不会改变: {{ msg }}</span>
   		<input type="text" v-model="msg" />
   	</div>
   	<script>
   		var app=new Vue({	
   			el:'#app',
   			data:{
   				msg: 'aaa'
   				}
   		})
   	</script>
   
   

对象节点

1. el:用来绑定需要渲染的html节点，后面跟上节点的id

2. data:用来存放需要进行响应式的数据，就是数据发生变化后，页面直接更改

3. methods:用来存放用户编写的方法

4. computed:可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，同时它里面的方法会进行缓存，

   **区别：**computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

5. watch:监听器，用来监听vue中data节点的数据变化,监听器也是一个方法, 这个方法的名称就是需要监听的数据的名字

声明周期

• beforeCreate,created,beforeMount ,mount ,beforeUpdate ,update , beforeDestory , destoryed ,其中需要进行销毁，则调用vm. $destory();