Vue结构

Vue结构

1.引入vue.js文件
2.书写视图层（书写静态部分）
3.实例化vue

let vm = new Vue({
        //控制区域
        el: '#app',
        // 存放数据
        data: {
            msg: 'hello Vue',
            num: 10,
             html: '我是html',
            text: '<h1>我是h1</h1>'
        },
        //存放的方法
        methods: {

        }

    })

差值表达式 {{}}

可以做一些简单的运算

<div id="app">
	{{num+10}}
</div>

v-text、v-html的异同：

1.相同点：都会覆盖掉原来的元素
2.不同点：v-text不会解析副文本，
	          v-html会解析副文本

书写方式

		<div v-text="html">123</div>
        <div v-html="html">456</div>

v-bind元素的属性绑定

<img v-bind:src="imgSrc" alt="">

简写 :

<img :src="imgSrc" alt="">     

v-on事件的绑定

<button v-on:click="log1">log1</button>

简写 @

<button @click="log2">log2</button>