Vue.js的部分基础知识

 

一、创建vue实例

　　

var vm = new Vue({
　　el:"#app",
　　data:{
　　　　//数据
　　　　arr:[1,2,4]
　　　　},
　　methods:{
　　　　//方法
　　　　},
　　components:{
　　　　//模版
　　　　},
　　create:{
　　　　// 生命周期函数
　　　　// 最早能获取到数据的
　　　　}
})

 

二、Vue的指令

　　1.数据绑定指令

　　　　1.1  v-text : 绑定数据可以解决闪烁问题

　　　　　　　　<span v-text="msg1"></sapn>

　　　　1.2  v-html : 绑定数据，可以解决闪烁也可以编译页面结构代码

　　　　　　　　<span v-html="msg2"></sapn>

　　2. 监听事件 v-on\@

　　　　1. v-on:click = "change"

　　　　2.事件修饰符

　　　　　　阻止冒泡事件 : .stop  @click.stop = "change"

　　　　　　阻止默认事件 : .prevent   阻止表单跳转

　　3. v-model  双向数据绑定

　　　　v-model  双向数据绑定===》可以绑定，input，select、component

　　　　数据的处理：v-model.number <input v-model.number="pw">

　　　　　　　　　　v-model.name <input v-model.name="un">

　　4. v-for  循环

　　　　循环：items当前项，index当前项，key当前键（指定了key后，只能渲染列表中改变的的那一项）

　　　　　　<li v-for="(itmes index) in arr">{{items.name}}+{{items.ega}}+{{index}}</li>

　　5. v-if 

　　　　显示隐藏，如果隐藏的话，页面的结构都不存在，  切换消耗高

　　　　v-if=“布尔值”

 

 

　三、Vue 的部分api

　　1. ref  被用来给元素或子组件注册引用信息，引用信息会注册在父组件$refs上

　　2. computed  :  计算属性  当data中的数据发生变化时，就会触发这里面的计算

　　3. methods  :  事件处理器   可以直接通过VM实例访问这里面的方法，或者在指令表达式里直接使用   

　　4. watch  :  监听数据的变化，当发生变化时，里面设置的对应函数会调用，可以监听组件切换并做出对应的函数处理   

　　　watch:{

　　　　　　a:function(n,o){

　　　　　　　　　//n是新值，o 是旧值    

　　　　　　　　　要执行的函数

　　　　　　　　}

　　　　}

 

 

四、生命周期\钩子函数  （简概）

1.初始化

beforcreate  创建实例时   不能访问数据和方法

created  创建实例完成   最早能访问数据的和方法

boferMount  模版在内存中已经编辑好了，未渲染到页面中

mounted  模版已经渲染到页面中

2. 更新

beforUpdate  数据更新之前

update   数据更新完成，重新渲染完成后

3.组件使用

activated   组件在激活时  

deactivated  组件被停用时

4.实例销毁

beforDestroy   实例销毁之前

desroyed   实例销毁后