var vm = new Vue({
          el: "#app",  //标签id 或 标签类名
          data:{ //双向绑定的数据
              message: "王大锤",
              show: true,
              arr: [
                  { name: "王大锤", age: 18 }, { name:"罗小虎", age: 19 }
              ]
          }
      })

if="show">show为true展示
else>show为false展示

//第一种方式
vm.$watch('message', function(newValue, oldValue){
    //这个回调函数会在 ’vm.message‘ 改变后调用
})

//第二种方式，在Vue实例里面写
      new Vue({
          el: "#app",
          data: {
              message: "hello",
              //...
          },
          watch: {
              message: function(newValue, oldValue){
                //这个回调函数会在‘message'改变后调用
              }
          }
      })

　　注意：动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。

11、对于在html标签中的插值使用双括号{{message}}来绑定数据，如果想把数据绑定在HTML标签中的属性上，如类名(.)、样式(style)、自定义属性等如何操作？

　　一般格式为 v-bind:属性名 = "变量名"，如：

　　绑定事件的格式为  v-on:事件类型 = "事件名"，如：

12、对于表单标签的一些存在即为true的属性，如何让它们默认为false(比如复选框checkbox的checked属性，所有表单标签的disabled属性) ？

　　比如： 

　　这三种写法的效果是一样的，即这些复选框一渲染出来就是默认选中状态，类似的disabled属性也是这个表现。

　　那么如何让它们默认为false呢？用v-bind, 比如：

13、Vue模板语法除了绑定变量，还能绑定表达式，如：

{{number + 1}} ， {{ok ? '展示':'隐藏'}} ，{{message.split('').reverse().join('')}}

14、v-bind和v-on的缩写方式：

　　v-bind:  可以缩写成 :  

可以缩写成

　　v-on: 可以缩写成 @ 

可以缩写成

15、模板内的表达式可以进行简单运算，如果在模板内进行复杂逻辑有什么后果？有什么替代方案？

　　在模板中放入太多的逻辑会让模板过重且难以维护。因此，对于任何复杂逻辑，应该使用计算属性。如：

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

　　我们可以像绑定普通属性一样在模板中绑定计算属性，普通属性和计算属性已经建立了依赖关系。当普通属性变化时，计算属性也会跟着更新。

　　当然我们能够看出，使用计算属性实现的效果，使用方法也能达到同样的效果，比如：

Reversed message: "{{ reversedMessage() }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
})    

　　那么问题来了，既然使用计算属性和方法的效果是一样的，那么用哪个更好性能更高？

　　这个要具体问题具体分析，看用在哪些场景下。计算属性是基于它们的响应式依赖进行缓存的，只有相关响应式依赖发生改变时他们才会重新求值。这就意味着只要message还没发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

　　因此，根据实际情况是否需要缓存，来判断是使用计算属性，还是使用方法，让性能更高。

　　另外，计算属性vs侦听属性的区别比较，在某种场景下：当有些数据需要随着其他数据的变动而变动时，通常更好的做法是使用计算属性，而不是命令式的watch回调。如：

{{ fullName }}

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

　　上面的代码式命令式重复的。且看使用计算属性如何实现这个效果：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

　　可以看出，在这种场景下，使用计算属性比侦听属性要好的多。

16、给标签绑定类名和内联样式，有几种写法？

　　主要有两种：对象语法和数组语法，看下面的例子：

class的对象语法
class的对象语法
class的对象语法
class的数组语法
class的数组语法
style的对象语法
style的对象语法
style的数组语法

data:{
    classObj: { isOK: true, isNO: false }, //class对象语法
    classObj2: { classOne: true, classTwo: true }, //class的对象语法2
    classObj3: ['classOne', 'classTwo'],   //class的数组语法
    styleObj: { fontSize: '50px', 'border-bottom': '8px dashed purple', color: 'red' }, //内联样式的对象语法
    styleObj2: { borderLeft: '3px solid red', 'border-right':'5px solid green' }, //内联样式的对象语法
},

最后这8个div渲染为：

class的对象语法
class的对象语法
class的对象语法
class的数组语法
class的数组语法
style的对象语法
style的对象语法
style的数组语法

17、数组有很多方法，哪些方法能够被Vue侦听，哪些方法不能被侦听？

　　数组的push、pop、shift、unshift、sort、rever、splice等方法的调用会改变原数组，因此能够被Vue侦听；

　　而filter、concat、slice等方法调用不会被改变原数组，而总是返回一个新数组，因此这几个方法的调用不会被Vue侦听。所以对于filter、concat、slice如果也想被侦听，可以用新数组替换旧数组。

　　另外对于数组的通过索引修改某一项的值，或者修改数组的长度，也不会被Vue侦听，比如：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的, 不会被Vue侦听
vm.items.length = 2 // 不是响应性的，不会被侦听

　　如果想被Vue侦听，则可以使用vm.$set，或Vue.set（vm.$set实例方法是全局方法Vue.set的一个别名），如下：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

//修改数组索引长度的方法
vm.items.splice(newLength)

　　另外对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是可以使用Vue.set(object,  propertyName,  value)方法向嵌套对象添加响应式属性。

18、调用事件时，如何传递原始DOM的事件对象event ？

　　如果是非内联方法，方法中默认第一个参数就是event；对于内联事件方法，可以传$event表示原始DOM的事件对象，如：

method: {
    getFocus: function(event){
        console.log(event);
    },
    clickMe: function(msg, event){
        console.log(msg, ',', event);
    }
}

19、事件修饰符合按键修饰符

　　1、在Vue中如何调用preventDefault()和stopPropagation()等事件方法？

　　尽管我们可以在方法中轻松实现这些，但更好的方式是：方法只是纯粹的数据逻辑，而不是去处理DOM事件细节。因此，Vue为v-on提供了事件修饰符。

...



...

　　注意：使用修饰符时，顺序很重要：相应的代码会以同样的顺序产生。比如v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

　　2、按键修饰符

　　如何对键盘某别特别按键进行监听，如著名的event.keyCode= 13表示对键盘enter按键的监听。

　　Vue对常用的按键设置了别名，如：enter、tab、delete(捕获“删除”和“退格”键)、esc、space、up、down、left、right等，用法：　　

　你还可以通过全局config.keyCodes对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

20、组件，如何创建一个组件？组件复用要注意哪些地方？父级如何传递数据给子组件？子组件如何传递数据给父级？

     1、组件的创建，先看一个示例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})

new Vue({ el: '#app' })

    
                 v-on:change-name="updateName" v-on:change-age="updateAge">
    
                 v-on:change-name="updateName" v-on:change-age="updateAge">

//注册全局组件, 注册之后，每个Vue实例都可以使用
Vue.component('tan-one-com',{
    //父级bind用驼峰，子组件用全小写;
    //父级bind用全小写，子组件用全小写;
    //父级bind用中杠线连接，子组件可用驼峰式
    props: ['superObj'],  //接收来自父级传递过来的数据
    data: function(){  //自定义属性，必须用函数。这是为了保证该组件在复用时，各组件实例数据互不影响
        return {
            count: 1
        };
    },
    methods: {
        inputName: function(event){
            console.log(event.target.value);
            //通知父级，传递最新值给父级
            this.$emit('change-name', { value: event.target.value });
        },
        inputAge: function(age){
            //传递最新值给父级
            this.$emit('change-age', { value: age });
        }
    },
    template: '
' +
                '
点我加一：{{count}}
' +
                '
' +
                '
' +
              '
'
})

var vm = new Vue({
    el: "#app",
    data:{
        myInfo: { name: '', age: 18 },
    },
    methods: {
        updateName: function(event){
            this.myInfo.name = event.value;
        },
        updateAge: function(event){
            this.myInfo.age = event.value;
            console.log("event: ", event);
        }
    }
});

    
        
男儿何不带吴钩，收取关山五十州；
        
请君暂上凌烟阁，若个书生万户侯。
    

//注册全局组件，父级如何在子组件中插入自定义标签
        Vue.component('tan-two-com', {
            template: '
' +
                        '
我是子组件，给父级开放一个入口，方便插入父级自定义标签，用slot标签来接收父级自定义标签
'+
                        ''+
                        '
..........end.......
'+
            '
'
        })

Vue.component('my-component-name', { /* ... */ })