Vue

学习要点

把基础学好
把教程看到「自定义指令」
响应式机制和组件生命周期是重点（一定要反复看）
学习 vue-router 和 vuex
学习 Node 工具

创建Vue实例：new Vue(selector)
Vue实例的生命周期钩子：beforeCreate ，created ， beforeMount ， mounted ， beforeUpdate ， updated ， beforeDestroy ， destroyed
data.rawHtml 的值为 <b>hi</b>，经过 Vue 渲染<p v-html="rawHtml"></p>后，显示在「页面」中的内容是加粗的hi
data.className = ‘???’，希望 p 的 class 为 data.className 的值

1. <p :class="className">
2. <p :class=className>
3. <p v-bind:class="className">
4. <p v-bind:class=className>

data.className = ‘???’，希望 p 的 class 为 data.className + ‘-container’的值

1
2
3

1. <p v-bind:class="className + '-container'">
2. <p v-bind:class="`${className}-container`">
3. <p v-bind:class=`${className}-container`>

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href
v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click,最好不要用@，因为asp.net mvc页面识别@ 不太好
v-on:click=”函数名” 函数写在new Vue的methods里面

v-model:语法糖，在表单控件或者组件上创建双向绑定,v-model=”resume.name” 绑定data里面的属性
v-show=”true/false” 控制元素显示/隐藏

<h1 v-show="!editing">{{resume.name}}</h1>
<input type="text" v-show="editing" v-model="resume.name">
<button v-on:click="editing=!editing">编辑</button>

var app=new Vue({
            el:'#page',
            data:{
                editing:false
                }
            },
        })

v-for 遍历数组，并不停创建当前元素

1	<li v-for="skill in resume.skills"></li>

Vue组件

组件化是一种特殊的模块化
可以把template的内容替换到HTML上

<editable-span v-bind:value="resume.name" v-on:edit="onEdit('name',$event)"></editable-span> //传一个value出去，收到edit事件，调用函数onEdit，不加('name',$event)默认传($event)
<editable-span :value="skill.description" @edit="onEdit(`skills[${index}].description`,$event)">{{skill.description}}</editable-span> //onEdit(`skills[${index}].description`,$event)调用onEdit函数传入skills数组的每个value

Vue.component('editable-span',{
    props:['value'],  //声明从外部接收一个value，外面给的属性
    template:`  //模板
        <div>
            <span v-show="!editing">{{value}}</span>
            <input type="text" v-show="editing" v-bind:value="value" v-on:input="triggerEdit">  //调用函数x，不能用v-model="value"，不能改外边的值
            <button v-on:click="$emit('edit')">编辑</button> //在template里面$emit不需要加this
        </div>
    `,
    data(){ //自己的属性
                return {
                    editing:false //变量表示状态
                }
            }，
    methods：{
                triggerEdit(e){
                    this.$emit('edit',e.target.value) //触发edit事件,传input.value当前值，在methods里面$emit需要加this
                }
            }
})

var app=new Vue({
            el:'#page',
            data:{
                resume:{
                    name:'York',
                    job:'web前端',
                    skills:[{},{},{}]
                }
            },
            methods:{
                onEdit(key,value){ 
                    this.resume.key=value  //将组件改的值覆盖现在的值
                }
            }
        })

组件之间通信

父子组件如何通信

子组件不能直接改父组件的data

子组件一定要改父组件的data，就子组件发事件通知父组件改data

<div id="app">
    <p>{{ message }}</p>
    <button @click="visible=true">打开</button>
    <child v-show="visible" @close="visible=false"></child> //父组件接收close事件，改data
  </div>

--------------------------------------------------------------
Vue.component('child',{
  template:`
<div>儿子<button @click="$emit('close')">关闭</button></div> //子组件想改父组件，$emit发事件close
`
})


var app=new Vue({
  el: '#app',
  data: {
    visible:true, //父组件的data
    message: 'Hello Vue.js!'
  }
})

爷孙组件如何通信
通过父子通信实现爷孙通信 Vuex有什么用？解决爷孙通信麻烦

<div id="app">
    <p>{{ message }}</p>
    <button @click="xxx=true">打开</button> //1-爷组件想关闭孙组件，改变data
    <child :visible="xxx" @close="xxx=false"></child> //3.爷组件收到close，改变data实现孙组件关闭 2-父组件收到data改变后的值
</div>
  ---------------------------------------------------------
Vue.component('child',{
  props:['visible'], //2-并接收爷组件传的值
  template:`
<div>
<sunzi @close="$emit('close')" v-show="visible"></sunzi> //2.父组件收到close，$emit发事件close给爷组件 3-父组件v-show改变关闭孙组件
</div>
`
})

Vue.component('sunzi',{
  template:`
<div>孙子<button @click="$emit('close')">关闭</button></div> //1.孙组件想关闭自己，$emit发事件close给父组件
`
})


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

组件里的data必须是个函数

Vue.component('login',{
    data(){
        return{
            logIn:{
                username:'',
                password:''
            },
        }
    },
}）

@submit.prevent=”fn” 事件修饰符，先prevent再submit，等价于e.preventDefault()

v-cloak：只要Vue实例一运行，就把v-cloak这个属性删掉，隐藏一开始不希望出现的元素

div[v-cloak]{
    display:none;
}
//css加载时隐藏属性为v-cloak的div，js加载完就删掉v-cloak

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

侦听器watch 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

var app=new Vue({
            el:'#page',
            data:{
                resume:{
                    name:'York',
                    job:'web前端',
                    skills:[{},{},{}]
                }
            },
            methods:{
                onEdit(key,value){ 
                    this.resume.key=value  //将组件改的值覆盖现在的值
                }
            },
            watch:{  //watch,如果currentUser.objectId改变，就执行函数
        'currentUser.objectId':function (newValue,oldValue) {
            if(newValue){
                this.getResume(this.currentUser)
            }
        }
    },
        })

如果你的属性名中有大写字母，属性名aaa-aaa会自动转成aaaAaa

Vue组件

组件之间通信

Comments