vue简单用法

挂载点就是Vue实例里面el属性对应的dom节点。

模板就是挂载点里面的内容，也可以写在实例的template中。

实例就是new的时候指定一个dom节点，一个模板内容，一个data属性，vue会自动生成一段动态的数据放在挂载点中。

<div id="app"></div>

//main.js
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<h1>{{ msg }}</h1>',
  data () {
    return {
      msg: 'Hello,my first Vue.js App'
    }
  }
})

常用指令：

1、v-text

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。例如：

<div id="app">  
  {{ message }}    
</div>  
var app = new Vue({  
   el : '#app',  
   data : {  
    message : 'hello worldsss'      
 }  
})

2、v-html

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">  
    <p v-html="html"></p>  
</div>  
var app = new Vue({  
   el: "#app",  
     data: {  
        html: "<b style='color:red'>v-html</b>"  
     }  
});

3、v-model

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

<div id="app">  
  <input v-model="message " />  
</div>  
var app = new Vue({  
   el : '#app',  
   data : {  
    message : 'hello world'      
 }  
})

4、{{}}

{{}}是v-text的简写形式

5、控制模块的显示/隐藏 v-if、v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

6、渲染循环列表 v-for

v-for是一个循环指令，一般跟数组结合起来使用，使用v-for时，建议给每个item设置key，例如：

<p id="wantuizhijia">
 <ol>
  <li v-for="site in sites" :key="site.id">
   {{ site.name }}
  </li>
 </ol>
</p>
 
<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   sites: [
    { name: '网推之家' },
    { name: '谷歌' },
    { name: '淘宝' }
   ]
  }
 })
</script>

v-for 也可以循环整数

<p id=”wangtuizhijia”>
<ul>
    <li v-for=”n in 10″>
        {{ n }}
    </li>
</ul>
</p>
<script>
    new Vue({
        el: ‘#wangtuizhijia'
    })
</script>

7、事件绑定 v-on

用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里会默认传一个参数。

<button @click="test"  ：href=“”>点击</button>  
  data：function（）{
    }

  methods: {  
    test: function (evt) {  
        console.log(evt);  
    }  
  }

8、v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<a v-bind:href="url" >...</a>
<!-- 缩写 -->
<a :href="url">...</a>

9、生命周期

创建前/后**（beforeCreated/created）**： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后**（beforeMount/mounted）**：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后**（beforeUpdate/updated）**：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后**（beforeDestory/destroyed）**：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

10、Vue中计算属性computed和监听属性函数watch

**计算属性：**基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
**侦听属性：**当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。通常更好的做法是使用计算属性而不是命令式的 watch 回调

相同点：
首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。

不同点：

watch和computed各自处理的数据关系场景不同

(1) watch擅长处理的场景：一个数据影响多个数据。适合监控场景，某【一个】变量改变时需要做什么操作；类似于onchange，适合耗时操作，如网络请求等。

(2) computed擅长处理的场景：一个数据受多个数据影响。某【一些】变量发生变化时，影响的【单个】结果对应地发生改变。