目录
一、Vue简介
1.基本概念
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
2.特点
(1)组件化模式,提高代码复用率,让代码更好维护。
(2)声明式编码,无需直接操作DOM,提高开发效率。
二、基本结构
1.步骤
在 head 标签中,添加vue.js文件。
准备一个容器:在容器中使用插值语法或者指令语法,获取vue实例中的数据。
准备 vue 实例:设置el属性和data属性。
键 el 的值为 通过CSS选择器得到的容器;
data 的值为 vue实例要与 容器 交互的数据内容。
2.el挂载点
el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
(1)el挂载点的作用范围? el命中的元素内部及其后代元素
(2)el适用于其他的选择器吗?
el : " #app " //id选择器
el : " .app " //class选择器
el : " div " //标签选择器
建议使用id选择器,因为id选择器是唯一的,其他的选择器都会命中多个元素。容易造成语义的不清晰。(3)是否可以选择其他的DOM元素?可以选择其他的元素,包括p标签,h2标签等。
注意:只支持双标签,不支持单标签。<body></body>此双标签不支持el挂载点。
3.data数据对象
vue中用到的数据定义在data中,data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
vue可以定义复杂类型的数据,包括对象类型、数组类型等
渲染复杂类型的数据时,遵守js的语法即可。
<div id="app"> <!-- view层 -->
<h2>{{name}}</h2><!-- 大括号语法 -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止弹出生产者提示
// 创建vue实例 -- 配置对象:键的值不可更改,对应的值类型不能随便改
// 建立起容器 app 与 当前vue实例 的联系,值通常为 CSS选择器字符串
const vm = new Vue({
el:'#app',
// el:document.getElementById('app') 这种写法通常不用
// data 中用于存储数据,数据提供 el 所指定的容器去使用
// 值暂时先写成一个对象,后期会写成一个函数;使用插值语法,将值写进容器中
data:{
name:"张三",
age:18
}
})
</script>
三、 插值语法与指令语法
插值语法 主要用在标签体中。
双花括号内填js表达式。age: {{age}}
指令语法 通常用来管理标签(标签属性,标签体内容,绑定事件),以v-开头
v-bind: 用来管理标签属性, 可以缩写为 :
例如:v-bind:href="xxx",xxx表示的是js表达式。
注意:无论是插值语法还是指令语法,其填充的都是 js表达式。
<body>
<div id="app">
<!-- <h2 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h2> -->
<h2 :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
message:`页面加载于${new Date().toLocaleString()}`
}
// data不能使用 ()=>{} 类型的箭头函数,否则其 this 会指向 windows,而不是我们的vue
// 实例。
// 由于是普通函数,实际操作中,可以省去 :function 直接写 data() {}。
})
</script>
</body>
四、MVVM模型
所谓MVVM模型包含如下几个部分:Model、View、ViewModel 分别对应 模型 - 视图 - 视图模型。所以,通常在定义 vue 对象时,我们将 变量名 设置为 vm .
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。
MVVM,一种软件架构模式,决定了写代码的思想和层次 。
M: model数据模型 (data里定义的数据)
V: view视图 (html页面中模板代码)
VM: ViewModel视图模型 Vue实例 (vue.js源码)
通过MVVM,我们可以在容器中获取vue对象以及vue原型上的所有属性。
data 中的所有属性,最终都会体现在 Vue 实例中, vm 身上的所有属性 以及 VUE 原型上的所有属性,在VUE模板中都可以直接使用 。