【Vue】基础（一）初识Vue - 模板语法 - 数据绑定 - el与data的两种写法 - MVVM模型
文章目录
-
-
- 1. 初识vue
-
-
- 1.1 vue是什么?
- 1.2 vue特点
-
- 2. Vue模板语法
- 3. Vue数据绑定
- 4. el与data的两种写法
- 5. Vue中的MVVM模型
-
1. 初识vue
1.1 vue是什么?
一套用于构建用户界面的渐进式javaScript框架。vue可以自底向上逐层的应用。
简单应用：只需要一个轻量小巧的核心库。
复杂应用：可以引用各式各样的vue插件。
1.2 vue特点
- 采用组件化，提高代码复用率，让代码更好维护
- 声明式编码，无需直接操作DOM，提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
示例代码
<div id="app">
<h1>hello，{{name.toUpperCase()}}，{{address}}h1>
div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
// 创建Vue实例
new Vue({
el: '#app', // el用于当前Vue实例为那个容器服务，值通常为CSS选择器字符串
data: { // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
name: 'China',
address: '成都'
}
});
script>
据以上示例代码总结如下：
- 想让Vue工作，必须创建一个Vue实例，且要传入一个配置对象。
- app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
- app容器里的代码被称为【Vue模板】。
- Vue实例和容器是一一对应的。
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用。
- {{xxx}}是Vue的插值语法，xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
- 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)。
2. Vue模板语法
Vue模板语法有2大类：
-
插值语法
功能：用于解析标签体内容。
写法：
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 -
指令语法
功能：用于解析标签(包括：标签属性，标签体内容，绑定事件…)
举例：
v-bind:href=“xxx”或 简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多指令，且形式都是：
v-开头的，此处只是拿v-bind举例。toUpperCase()方法用于把字符串转换为大写。
示例代码
<div id="app">
<h1>插值语法h1>
<h3>您好！{{name}}h3>
<hr>
<h1>指令语法h1>
<a v-bind:href="website.url" x="hello">点我去{{website.name}}网页1a>
<a :href="website.url.toUpperCase()" x="hello">点我去{{website.name}}网页2a>
div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
new Vue({
el: '#app',
data: {
name: 'jack',
website: {
name: '百度',
url: 'https://www.baidu.com/',
}
}
});
script>
3. Vue数据绑定
Vue中有2种数据绑定的方式：
-
单项绑定(
v-bind)：数据只能从data流向页面。 -
双向绑定(
v-model)：数据不仅能从data流向页面，也可以从页面流向data。注意：
- 双向绑定一般都应用在表单类元素上(如：
input、select等)，就是有value属性的标签。 v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
- 双向绑定一般都应用在表单类元素上(如：
示例代码
<div id="app">
单向数据绑定：<input type="text" v-bind:value="name"><br />
双向数据绑定：<input type="text" v-model:value="name"><br />
单向数据绑定：<input type="text" :value="name"><br />
双向数据绑定：<input type="text" v-model="name"><br />
div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
new Vue({
el: '#app',
data: {
name: '百度',
}
});
script>
4. el与data的两种写法
el的2种写法：
-
new Vue时候配置el属性。
-
先创建Vue实例，随后再通过
vm.$mount('#root')指定el的值。Vue 的
$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
示例代码
<script>
// 第一种写法
const vm = new Vue({
el:'#app',
data:{
name:'jack',
}
})
// 第二种写法
vm.$mount('#app')
// $mount也可直接在new Vue({})后.出，这种写法不需要用变量接收
setTimeout(() => {
new Vue({
data() {
return {
name: 'jack',
}
}
}).$mount('#app')
}, 1000)
script>
data的2种写法：
-
对象式
-
函数式
在组件中，data必须使用函数式，否则会报错。
示例代码
<script>
new Vue({
el:'#app',
// 第一种写法：对象式
data:{
name:'jack',
}
// 第二种写法：函数式，是data:function(){}的简写
data() {
return {
name: 'jack',
}
}
})
script>
注意：由Vue管理的函数，只能写普通函数，不能写箭头函数，如果写了箭头函数，this就不再是Vue实例。 箭头函数 this 指向 Window，普通函数 this 指向 Vue。
示例代码
<script>
new Vue({
el:'#app',
// 错误写法，this不再是Vue实例。箭头函数 this 指向 Window。
data: () => {
console.log('11111', this);
return {
name: 'jack',
}
}
// 正确写法，普通函数 this 指向 Vue。可简写为data(){}
data: function() {
console.log('11111', this);
return {
name: 'jack',
}
}
})
script>
5. Vue中的MVVM模型
- M：模型(Model)：data中的数据（就是new Vue({})中data内的数据）
- V：视图(View)：模板代码（就是HTML代码）（两个语法：指令、插值）
- VM：视图模型(ViewModel)：Vue实例对象（就是new Vue(){} ）
- Dom Listeners （Dom 监听）
- Data Bindings （数据绑定）
MVVM 本质上是 MVC (Model-View- Controller) 的改进版。即模型-视图-视图模型。
模型model指的是后端传递的数据，视图 view 指的是所看到的页面。
视图模型 viewModel 是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：
将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听这两个方向都实现的，我们称之为数据的双向绑定。
示例代码
<div id="app">
<h1>网站名称：{{name}}h1>
<h1>网站地址：{{addrss}}h1>
<p>测试1：{{1+1}}p>
<p>测试2：{{$options}}p>
<p>测试3：{{$createElement}}p>
<p>测试4：{{$emit}}p>
<p>测试5：{{_c}}p>
div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
// new Vue就相当于是 VM：视图模型(ViewModel)：Vue实例对象
const vm = new Vue({
el: '#app',
// data内的就相当于是 M：模型(Model)：对应data中的数据
data() {
return {
name: '百度',
addrss: 'https://www.baidu.com/',
}
}
})
console.log(vm);
script>
总结：
- data中的所有属性，最后都出现在了VM身上。
- VM身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用。