1、Vue代码理解

假设有如下代码：

var obj = new Object();
obj.name ='yang';
obj.say=function (){
    return this.name;
}
alert(obj.say());

// 我的理解就是下面这段代码就是以前的new Object() 然后函数对象和基础属性 分离开
<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
​
new Vue({
  el: '#root',
  data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

2、 {{}} 关键字 获取data 对象中的属性值

3、 可以在vue里面做运算

{{2+6}} {{5+5}} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

4、v-html 标签使用

// 作用在div 元素下生成一个子元素 
<div v-html="html"></div>   

5、v-if 标签使用

相当于 if 判断

<p v-if="result">我是杨红</p>  如果属性result是true  页面显示标签

6、v-bind:href = "href" 给元素属性赋值

7、v-model="message" 获取input中到data属性中的message

8、v-on:click ="dosomething" 执行点击事件绑定的函数

9、v-on:click ="dosomething" 执行点击事件绑定的函数

10 、 {{ message | capitalize }} 过滤器函数

11、 模板语法

12、 v-else-if if else if else

13 、v-show v-if

14、 v-for 等价于 for in

15、 computed 计算属性用的

如果某个属性重复使用 第二次不会执行这个函数 这就是和方法的区分 相当于 缓存了

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
        // `this` 指向 vm 实例
        console.log("+++++++++========");
        return this.message.split('').reverse().join('')
    }
}
// methods: {
//     reversedMessage: function () {
//         console.log("++++++");
//         return this.message.split('').reverse().join('')
//     }
// }
// 使用方式不同 {{reversedMessage}}  {{reversedMessage()}}

16、监听属性counter 变化 执行其他动作

var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});

17 、全局组件

<div id="app" class="demo">
    <!-- Vue组件  相当于占位符的？ -->  
    <simple-component></simple-component>
</div>
<script>
    // 组件名  template  要替换的HTML 代码  
    Vue.component("simple-component", {
        template: "<span>我是一个最简单的Vue组件示例</span>"
    })
    new Vue({
        el: "#app"
    })
</script>

18 、组件模板代码和js分离

<div id="app-test" class="demo">
    <vut-button></vut-button>
</div>
// 模板代码
<template id="vComponent">
    <div class="vut-button">
        <span>我是Button组件</span>
    </div>
</template>
​
<script>
    Vue.component("vut-button", {
        // 占位符
        template: "#vComponent"
    })
    new Vue({
        el: "#app-test"
    })
</script>

19 、局部组件注册

​​

<div id="app">
    <runoob></runoob>
</div>
​
<script>
    var Child = {
        template: '<h1>自定义组件!</h1>'
    }
​
    // 创建根实例
    new Vue({
        el: '#app',
        components: {
            // <runoob> 将只在父模板可用
            'runoob': Child
        }
    })

20 父子组件传值 props

​​

<div id="app">
    //  
    <child message="hello!"></child>
</div>
​
<script>
    // 注册
    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<span>{{ message }}</span>'
    })
    // 创建根实例
    new Vue({
        el: '#app'
    })
</script>

21 、动态props

<div id="app">
    <div>
        <input v-model="parentMsg">
        <br>
        <child :message="parentMsg"></child>
    </div>
</div>
​
<script>
    // 注册
    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 同样也可以在 vm 实例中像 "this.message" 这样使用
        template: '<span>{{ message }}</span>'
    })
    // 创建根实例
    new Vue({
        el: '#app',
        data: {
            parentMsg: '父组件内容'
        }
    })
</script>

ES6 知识点