vue 入门
从三件套到框架：组件思想、声明式编码、虚拟 dom，用尚硅谷的开头两节把插值语法和指令语法跑通，vue 实例与容器是"一夫一妻制"。
为什么是 vue
以组件的形式进行编写前端代码
页面中的每一个模块都是一个 .vue 文件
所谓复用率 就是当一个新页面也需要某个块的时候 只需要引入对应的 .vue 文件即可
而更好维护也是同理 只需要修改 .vue 里的东西 就可以全部进行更改
（很符合封装的思想 把一个一个功能封装起来 要用的时候调用即可 更改也方便）
对于数据 它采用声明式编码
比如这个 要把数据变成 ul 里面的 li
用 js 势必要写成：
一行代码都不能少 命令式地往下执行
而 vue 采用声明式
用 v-for 去遍历（其实就是内部写好了 调用接口）
虚拟 dom + diff 算法
对于一些更新的数据 原始做法是不管三七二十一 直接重新执行一遍 dom 去做覆盖
这样的话 如果只是添加了某条记录 就要做很多无用功
vue 采用中间加上一层虚拟 dom
使用 diff 算法 在这层虚拟 dom 里进行比对 再去变成真实的页面 dom
说白了其实就是把它把很多东西都做了一个封装 以类似函数调用的形式进行编程
然后同时也提供了很多库函数 （对于一些常用的功能它写好了 而且写的比你好 你要会调用接口） 其实本质也就是封装函数
准备工作：下载 vue、vue 开发者工具插件、vscode 中的 liveserver 插件
hello,?（插值语法）
首先以一个最简单的例子来对这样的模版化的东西做个了解
hello，world 这个 world 可以换成其他东西 由后端传入
就可以写成
<div id="root">
<h1>hello, {{ name }}</h1>
</div>
在 {{}} 中的东西就是被传入的可变化的东西
当然 这需要先 new 一个 Vue 对象
new Vue({
el: '#root',
data: {
name: 'world'
}
});
当然再前提是要引入 vue.js 文件
<head>
</head>
el 指的就是找到 id：root 的标签
data 是以类的形式去写的 这样可以提高拓展性
完整的一个 hello 案例：
<!doctype html>
<html lang="en">
<head>
<title>第一次使用vue</title>
<!--vue js生产版本production版本-->
</head>
<body>
<div id="root">
<!--插值语法-->
<!--vue模版-->
<h1>hello, {{ name }}</h1>
</div>
<div class="test">
<!--注意双花括号中可以写js表达式-->
<!--
js表达式：一个表达式生成一个值，放在任何一个需要值的地方
例如 (1).a (2) 1+b (3) demo(1) (4) x===y ? 1 : 0
js语句： if while for...
-->
<h1>{{name.toUpperCase()}},{{address}} {{1+1}} {{Date.now()}}</h1>
</div>
//hello小案例
Vue.config.productionTip = false; //默认不提示
//创建vue实例对象
/**
* 注意:一个vue实例不可能去接管多个容器，如果有多个容器的情况，vue实例永远只接管第一个容器
* 不能多个vue实例同时来接管同一个容器，如果有多个的情况下永远是第一个vue实例来接管该容器
* vue实例与容器之间的对应关系是一对一的
*/
new Vue({
//配置对象
el: '#root',// document.getElementById('root') //element el指定当前vue实例为哪一个容器服务，值通常为css选择器格式
data: {
//data用来存储数据，以后会用函数来表示
name: 'zhouwei',
age: 21
}
});
new Vue({
el: '.test',
data: {
name: 'test',
address: 'nancheng'
}
})
</body>
</html>
知识点小结：
- 想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；
- root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；
- root 容器里的代码被称为【Vue 模板】；
- Vue 实例和容器是一一对应的；
- 真实开发中只有一个 Vue 实例，并且会配合着组件一起使用；
- {{xxx}} 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；
- 一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新。
工作流程
先有的容器（带着标签的 div 等）再有的 Vue 实例
当 Vue 实例开始工作的时候 发现 el 中的配置（指定的选择器）
找到那个容器
于是把整个容器拿过来解析 检查有没有自己设计的一些语法（data 中的关键字）
在容器中找到了"{{name}}"回到 data 里找到 name
然后把 data 中 name 的值全部替换掉容器里的 {{name}}
模板 -> 解析 -> 全新 div
一夫一妻制
然后注意的一点是容器与实例是一对一的
想一个标签用多个 vue 去管理或者多个标签用同一个 vue 管理都是不行的
一夫一妻制
如果以后东西多了 这个 hello，world 里有 100 个数据是动态的
就意味着 data 里面也要写 100 行东西 这就显得很庞大 因为这种一夫一妻的制度
确实只能这样 一个容器用一个实例对应 但是 实例是可以拆解的
可以把它拆成多个部分 40 条给第一部分管理 20 条给第二部分……
这样的各个部分其实就是"组件"的思想
跳转 url（指令语法）
对于标签里面的内容可以这样随意替换成其他内容 （用插值语法）
那如果是一个 a 标签中的 url 呢
想让它也不是写死的 能变化该怎么办
也是一样写法吗
<div id="root">
<a href={{url}}>这是一个超链接</a>
</div>
new Vue({
el: "#root",
data: {
url: 'https://www.baidu.com',
}
})
貌似不太行
其实可以发现这完全不一样
之前的插值语法针对的对象是 div 等标签里面的元素
而这里的 url 是标签的一个属性
都不是同一个东西
所以这里要用另一种方法——指令语法
在 href 前使用 v-bind 属性 表示后面的 url 里面的东西都被当成 js 语句执行
<div id="text">
<a v-bind:href="url">这是一个超链接</a>
</div>
Vue.config.productionTip = false;
new Vue({
el: "#text",
data: {
url: 'https://www.baidu.com',
}
})
可以惊奇的发现 url 被替换成了 data 中 url 里面的东西
然后这个 v-bind: 是可以缩写的 缩写成 :
那么可以写成：<a :href="url">这是一个超链接</a>
也就是在正常写法中 在 href 前加个 : 然后原本填入的真实 url 用一个字符串代替 改写到 vue 实例中 由后端传入
模板语法两大类
Vue 模板语法有 2 大类：
1. 插值语法：
- 功能：用于解析标签体内容。
- 写法：{{xxx}}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性。
2. 指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
- 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx 同样要写 js 表达式，且可以直接读取到 data 中的所有属性。
- 备注：Vue 中有很多的指令，且形式都是：v-????，此处我们只是拿 v-bind 举个例子。
完整示例：
<!DOCTYPE html>
<html>
<head>
<title>模板语法</title>
<!-- 引入Vue -->
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>
</body>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: 'jack',
school: {//解决冲突 可以分层级地去写 类里面嵌套类
name: '尚硅谷',
url: 'http://www.atguigu.com',
}
}
})
</html>
附件
- vue.docx
💬 评论