初识vue

使用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模板中都可以直接使用。

---