使用vue输出hello
使用vue必须先创建一个容器,然后给容器命名,接着在js代码中用vue实例来接管这个容器:
注意我们的容器和实例是一一对应的
el代表的是我们选择的容器,这里可以是id也可以是css选择器。
通常我们解析在容器中为了显示实例中vue的代码,我们有两种写法:
1.数据绑定类型,一般用于放置输入类型的:
v-bind单向绑定,v-modle双向绑定
例子:
单向绑定:<a v-bind:href="school.url">百度跳转1</a>
可以简写为<a :href="school.url">百度跳转1</a>
双向绑定:<input type="text" v-model:value="name">
2.{{}}
例子{{name}}
当我们的实例中有多个name的时候,我们会选择最后的一个name来解析
el和data的两种写法
el:
el 的两种写法是没有区别的,只不过第二种更加的灵活:
new Vue({
el:"#root",
data:{
name:"xpp"
}
})
const v=Vue({
data:{
name:"xpp"
}
})
v.$mount("#root")
data的两种写法:
1.像上面一样直接写
const v=Vue({
data(){
return {
name:"xpppp"
}
}
})
v.$mount("#root")
组件必须用函数式,而且不能写成箭头函数,因为箭头函数的this指向全局对象,但是我们需要的是vue实例
MVVM模型:
1M:模型(Mode1) : data中的数据
2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):
Vue实例观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用。