1. Vue实例化
<div id="app">{{ message }}</div>
1.1 关于{{}} 插值表达式：mustache
插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算
let vm = new Vue({ //实例化
el:"#app", // 告诉vue能管理那个部分,使用的是querySelector
data:{ //data中的数据会被vm所代理
message:"hello Vue"//可以通过vm.msg取到对应的内容 ,也可以赋值
}
})
1.2 使用 JavaScript 表达式
<div id="app">
<!-- 数字操作 -->
<p>{{ number + 2 }}</p>
<!-- 三目运算 -->
<p>{{ ok ? 'YES' : 'NO' }}</p>
<!-- 字符串翻转 -->
<p>{{ message.split('').reverse().join('') }}</p>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: 'Hello World',
number: 10,
ok: true,
}
})
</script>
1.3 $data属性
vue关注的是数据变化,不需要在像以前一样关注DOM的变化
关于实例介绍：
- 实例对象上有
$data属性,其值就是选项对象中data属性值 - 选项对象就是在实例化
Vue时传入的对象 -
data属性值是一个对象,因此$data也就是这个对象 - 当通过
$data修改msg的值时,也就等于改data中的值, 对应是引用类型
data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示
1.4 实例常用的属性和方法
vm.$attrs // 用户获取父组件传递给子组件的属性,(除props,class,style外)
vm.$data // vm 上的数据
vm.$watch // 监听
vm.$el // 当前el元素
vm.$set // 后加的属性实现响应式
vm.$options // vm 配置 上的 所有属性
vm.$nextTick(()=>{}) // 异步方法,等待渲染dom完成后来获取vm
vm.$refs // 获取dom元素或者组件实例的引用
vm.$data === data // => true
vm.$el === document.getElementById('app') // => true
//Vue实例属性还有很多
2.多个Vue实例化
<div id="app">
{{message}}
</div>
<div id="app2">
{{message}}
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello World"
}
//this == vm
})
const vm2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
})
3.Vue.$refs操作原生Dom元素
<div id="app">
<div ref="div">DivElement</div> <!--为标签命名-->
<button @click="handleClick">改变数据</button>
</div>
const vm = new Vue({
el:"#app",
data:{
message:"hello Vue"
},
methods:{
handleClick(){
let elements = this.$refs.div;
elements.innerHTML = this.message;
}
}
})
Vue只负责它所接管的Dom元素
