vue 安装、挂载点、模板与实例、vue实例中的数据，事件和方法

1、安装

1.1在Vue.js官网下载，并用<script>标签引用

1.2使用CDN方法

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

1.3NPM方法

命令行工具

$ npm install vue

2、实例、挂载点、模板

2.1Vue实例

2.1.1创建vue实例

var vm=new Vue({
   //选项
})

  vue实例选项：

el：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。

data:数据对象

methods:将被混入到Vue实例中，可以通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例。

props:可以是数组或对象，用于接收来自父组件的数据

propsData：穿件实例时传递props。主要作用时方便测试

computed：计算属性将被混入到Vue实例中

watch：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

2.1.2Vue实例生命周

生命周期函数就是Vue实例在某一个时间点会自动执行的函数，生命周期函数不用定义在methods里面。

生命周期函数有

beforeCreate：最基础的初始化完成后执行

created：初始化完成，完成双向绑定等内容后执行，但还未指定模板

beforeMount：页面渲染之前执行（页面挂载之前）

munted：挂载之后执行

beforeUpdate：页面数据更新之前执行

updated：页面数据更新之后执行

activated：

deactivated：

beforeDestroy:页面销毁之前执行

destroyed:页面销毁之后执行

2.2挂载点

Vue实例中el指向的dom节点，实例中的div

2.2.1为挂载点添加内容：

差值表达式：{{ }}

        <div id="root">{{msg}}</div>

v-text指令:会转义

v-html指令：不会转义

<div id="root">
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            msg: "<h1>hello world</h1>"
        }
    })
</script>

展示

 

2.2.2添加事件

v-on指令，可以缩写为@

v-on:click=“handlerClick”等价于@click=“handlerClick”

methods：添加方法

<div id="root">
         <div v-on:click="handleClick">{{content}}</div>
    </div>
<script>
    new Vue({
        el:"#root",
        data:{
           content: "hello"
        },
        methods:{
            handleClick: function () {
                this.content="world";//修改内容
            }
        }

    })
</script>

展示 

 

3、模板

挂载点内部的内容。可以在挂载点内写，也可以在Vue实例中template属性下写

<div id="root">{{msg}}</div>
<script>
    new Vue({
        el:"#root",
        template:’<h1>hello {{msg}}</h1>’,
        data:{
            msg: "hello world"
        }
    })
</script>

展示