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>