Vue
...大约 17 分钟
Vue
第01章 Vue官网
第02章 Vue基础
简介
Vue是一套构建用户界面的渐进式JavaScript框架(Vue可以自底向上逐层应用，简单应用只需一个小巧的核心库，复杂应用则可以引入各式各样的Vue插件)。由尤雨溪开发。后起之秀，生态完善，已然成为国内前端工程师必备技能。前身叫Seed，2013年改名为Vue。
特点
特点一：采用组件化模式(将页面分割成一个个组件，每个组件互不影响)，提高代码复用率，且让代码更好维护
特点二：声明式编码(传统的命令式编码需要一步一步告诉别人怎么做，声明式编码就是我只告诉你你口渴了，你自己去喝水而无需我告诉你详细步骤)，让编码人员无需直接操作DOM，提高开发效率
特点三：使用虚拟DOM+优秀的Diff算法(一种比较算法)，尽量复用DOM节点
MVVM模型
M: 模型(Model) ---> 对应data中的数据
V: 视图(View) ---> 模板
VM: 视图模型(ViewModel) ---> Vue实例对象
插值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<!-- 准备好容器 -->
<div id="root">
<!--用插值表达式引用vue实例中data中定义的数据-->
<!--{{ xxx }}中的xxx要写Js表达式，如可以写{{ name.toUpperCase() }}-->
<h1>Hello,{{ name }}</h1>
</div>
<script type="text/javascript">
// Vue构造函数里面需要传一个参数,类型是一个对象,通常叫配置对象
new Vue({
// el是element的简称 作用是建立起当前vue实例与id为root的容器建立连接
// 表示当前vue实例为id是root的容器服务
el: '#root',
// data用于存储数据供el所指定的容器去使用
data:{
name: 'TenSoFlow'
}
})
</script>
</body>
</html>
Vue实例和div容器是一对一的关系，即一个Vue实例只能对应一个div容器。不存在多个Vue实例对应一个div容器和多个div容器对应一个Vue实例。
el与data的两种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<!-- 第一种写法 -->
<!-- <script type="text/javascript">
new Vue({
el: '#root',
data:{
name: 'TenSoFlow',
}
})
</script> -->
<!-- 第二种写法 -->
<script type="text/javascript">
const v = new Vue({
// data的第一种写法对象式
// data:{
// name: 'TenSoFlow',
// }
// data的第二种写法函数式 学习组件之后必须用函数式
data:function(){
return{
name: 'TenSoFlow',
}
}
});
v.$mount('#root'); // 相当于 el: '#root',
</script>
</body>
</html>
Object.defineProperty
Vue数据绑定的底层就是该方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let number = 18;
let person = {
name: "TenSoFlow",
sex: "男",
}
// Object.defineProperty可以向对象中自定义的增加属性
// 如下是向对象person中增加age属性
Object.defineProperty(person,'age',{
value: 18, // 设置age的值为18
enumerable: true, // 控制该属性是否可以被枚举，默认值是false
writable: true, // 控制该属性是否可以被修改，默认值是false
configurable: true, // 控制该属性是否可以被删除，默认值是false
// 当有人读取person的age属性时，get函数就会被调用，且返回值是age的值
get(){
// 此方法可以把age属性与number变量关联起来，只要number变则age就变
return number;
},
// 当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值
set(value){
number = value;
}
})
</script>
</body>
</html>
数据代理
数据代理就是通过一个对象代理对另一个对象中属性的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,'x',{
get() {
return obj.x;
},
set(value) {
obj.x = value;
}
})
</script >
</body>
</html>
v-on 及事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{ name }}的网页</h2>
<!-- 绑定点击事件，方法为ShowInfo -->
<button v-on:click="ShowInfo">点我提示信息</button>
<!-- 简写形式 -->
<button @click="ShowInfo">点我提示信息1</button>
<!--
1.prevent 阻值默认事件
2.stop 阻值事件冒泡
3.once 事件只触发一次
4.capture 使用事件的捕获模式
5.self 只有event.target是当前操作的元素时才触发事件
6.passive 事件的默认行为立即执行，无需等待事件回调执行完毕
-->
<!-- 修饰符可以连续写如 @click.prevent.stop -->
<!-- prevent阻值默认事件 即阻值a标签的跳转页面 -->
<a href="https://www.baidu.com" @click.prevent='ShowInfo()'>点我跳转页面</a>
<!-- once事件只触发一次 即只能点一次-->
<button @click.once="ShowInfo()">点我提示信息</button>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'TenSoFlow'
},
methods: {
// 方法必须写在methods中
ShowInfo () {
alert('同学你好!');
}
}
})
</script>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{ name }}的网页</h2>
<!--
vue中常见按键别名
enter 回车
delete 删除
esc 退出
space 空格
tab 换行 （特殊 必须使用@keydown.tab）
up 上
down 下
left 左
right 右
-->
<!-- 按下回车才会执行ShowInfo方法 -->
<input type="text" placeholder="按下回车提示输入" @keyup.enter="ShowInfo()"/>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'TenSoFlow'
},
methods: {
// 方法必须写在methods中
showInfo () {
alert('同学你好!');
}
}
})
</script>
</body>
</html>
v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-if可以控制是否存在此标签
值可以是true或者false
亦或者是有真假的表达式 如 1 === 3
和v-if一起出现的还有v-else-if以及v-else
和Java中if else-if else表达的意思是一样的
-->
<h2 v-if="true">欢迎来到{{ name }}的网页</h2>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data:{
name: 'TenwSoFlow',
},
})
</script>
</body>
</html>
v-pre
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-pre指令能跳过其所在节点的编译过程
可利用它跳过没有使用指令语法，没有插值语法的节点，会加快编译。
-->
<h2 v-pre>Vue其实很简单</h2>
<h2>现在的n值：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'TenSoFlow',
n: 1
},
});
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2 >欢迎来到{{ name }}的网页</h2>
<ul>
<!-- 遍历数组 -->
<!-- 第一种写法 -->
<li v-for="person in persons" :key="person.id">
姓名：{{ person.name }}
年龄：{{ person.age }}
</li>
<br>
<!-- 遍历数组 -->
<!-- 第二种写法 有下标-->
<!-- 最好用person.id做key而不是index -->
<li v-for="(person, index) in persons" :key="person.id">
姓名：{{ person.name }}---{{ index }}
年龄：{{ person.age }}---{{ index }}
</li>
<br>
<!-- 遍历对象-->
<h2>汽车信息</h2>
<ul>
<li v-for="(value, key) in car" :key="key">
{{ key }}----{{ value }}
</li>
</ul>
<!-- 遍历字符串-->
<h2>测试遍历字符串</h2>
<ul>
<li v-for="(i, index) in string" :key="index">
{{ i }}---{{ index }}
</li>
</ul>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: 'TenwSoFlow',
persons: [
{ id:'001',name:'张三',age:19 },
{ id:'002',name:'李四',age:23 },
{ id:'003',name:'王五',age:21 }
],
car: {
name:'奥迪A8',
price:'70w',
color:'黑色'
},
string:'Hello TenSoFlow'
},
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-show可以控制是否显示此标签
值可以是true或者false
亦或者是有真假的表达式 如 1 === 3
-->
<h2 v-show="true">欢迎来到{{ name }}的网页</h2>
<br/>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: 'TenwSoFlow',
},
})
</script>
</body>
</html>
v-bind
v-bind 是一个用于动态绑定 HTML 特性的指令。它的作用是将一个表达式的值绑定到指定的 HTML 特性，使其动态地根据 Vue 实例中的数据进行更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello, {{ name }}</h1>
<h1>指令语法 v-bind</h1>
<a v-bind:href="url">点我跳转页面1</a>
<!-- 简写 v-bind 可以简写成 : -->
<a :href="url">点我跳转页面2</a>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'TenSoFlow',
url: 'https://www.baidu.com',
}
})
</script>
</body>
</html>
在上面的例子中，:href 就是 v-bind 的缩写。这里的 url 是一个在 Vue 实例中定义的数据属性，它的值会动态地绑定到 <a> 元素的 href 特性上。当 url 的值发生变化时，相关的 HTML 特性也会被更新。
v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"> </script>
</head>
<body>
<div id="app">
<h2>Hello,{{ name }}</h2>
<div v-text='name'></div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'TenSoFlow'
},
});
</script>
</body>
</html>
v-html
v-html有安全性问题,容易导致XSS攻击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
</head>
<body>
<div id="app">
<h2>Hello,{{name}}</h2>
<!-- v-text是完全把str当作字符串 -->
<div v-text='str'></div>
<!-- v-html可以把str字符串解析成html页面 -->
<div v-html='str'></div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'TenSoFlow',
str: '<h3>TenSoFlow</h3>'
},
});
</script>
</body>
</html>
v-once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-once所在节点在初次动态渲染之后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
-->
<h2 v-once>初始值n值：{{n}}</h2>
<h2>现在的n值：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'TenSoFlow',
n: 1
},
});
</script>
</body>
</html>
v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定：<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">
<!-- 以下代码是错误的，因为v-model只能应用在表单类元素上 -->
<h2 v-model:x="name">Hello</h2>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'TenSoFlow',
}
})
</script>
</body>
</html>
v-bind数据只能从data流向页面，v-model则可以双向流通。v-model一般都应用在表单类元素即输入类元素上如input select等。简单说应用在有value属性的表单类元素上。
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<h2>当前的n值：<span v-text="n"></span></h2>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<hr>
<input type="text" v-fbind="n">
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'TenSoFlow',
n: 1
},
// 自定义v-xxx指令
directives: {
// 第一种写法 函数式
// element是与v-big绑定的span标签,binding是与v-big绑定的data中的n
// big函数调用时机 1.指令与元素成功绑定(一上来) 2.指令所在模板被重新解析时
big(element, binding) {
element.innerText = binding.value * 10
},
// 第二种写法 对象式
// 一般需要 指令所在元素被插入页面时调用 则写成对象式 其余情况写成函数式
fbind:{
// 指令与元素成功绑定(一上来)调用
bind(element, binding){
element.value = binding.value
},
// 指令所在元素被插入页面时调用
inserted(element, binding){
element.focus()
},
// 指令所在模板被重新解析时调用
update(element, binding){
element.value = binding.value
}
}
}
});
</script>
</body>
</html>
计算属性
计算属性 computed。计算属性是不存在的要通过已有的属性计算得来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}的网页</h2>
姓：<input type="text" v-model="firstName"/> <br/>
名：<input type="text" v-model="lastName"/> <br/>
全名：<span>{{ fullName }}</span>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
firstName: 'TenSo',
lastName:'Flow'
},
methods: {
// 方法必须写在methods中
ShowInfo () {
alert('同学你好!');
}
},
// 计算属性
computed:{
fullName: {
// 当有人读取fullName时，get就会被调佣，且返回值就作为fullName的值
get () {
return this.firstName + '-' + this.lastName;
}
},
// 简写
fullName () {
return this.firstName + '-' + this.lastName;
}
}
})
</script>
</body>
</html>
监视属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{ name }}的网页</h2>
<br>
<h2>今天天气很{{ info }}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: 'TenwSoFlow',
isHot: true
},
methods: {
changeWeather () {
this.isHot = !this.isHot;
}
},
computed: {
info () {
return this.isHot ? '炎热' : '凉爽';
}
},
// 监视属性
watch:{
// 表示监视的属性是isHot
isHot:{
// 配置属性，为true时表示初始化时让handler调用一下
immediate: true,
// handler当isHot被修改时调用，其中第一个参数是修改后的值，第二个参数是原始值
handler(newvalue,oldValue){
console.log('handler被修改了');
}
}
}
})
// 第二种写法 用实例调用
// vm.$watch('isHot',{
// // 配置属性，为true时表示初始化时让handler调用一下
// immediate: true,
// // handler当isHot被修改时调用，其中第一个参数是修改后的值，第二个参数是原始值
// handler(newvalue,oldValue){
// console.log('handler被修改了');
// }
// })
</script>
</body>
</html>
深度监视
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}的网页</h2>
<br>
<h2>a的值是{{number.a}}</h2>
<button @click="number.a++">点我让a加1</button>
<br/>
<h2>b的值是{{number.b}}</h2>
<button @click="number.b++">点我让b加1</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data:{
name: 'TenwSoFlow',
number:{
a: 1,
b: 2
}
},
watch:{
// 监视多级结构中的某个属性的变化要加'' 而不是直接写number.a
// 此时只有a变才会调用handler,b变不会调用
// 'number.a':{
// handler(){
// console.log('a被改变了')
// }
// },
// 监视多级结构中的所有属性的变化
// 此时只要a和b中的某一个发生变化则都会调用handler
number:{
// 要想实现深度监视需要配置deep为true
deep: true,
handler(){
console.log('number被改变了')
}
}
}
})
</script>
</body>
</html>
收集表单数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model绑定的数据都是各输入框的value值 -->
<!--
收集表单数据:
若: <input type="text"/>, 则v-mode1收集的是value值，用户输入的就是value值。
若: <input type="radio" />，则v-mode1收集的是value值，且要给标签配置value值。
若: <input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
2.配置input的value属性:
(1)v-mode1的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值)
(2)v-mode1的初始值是数组，那么收集的就是value组成的数组
备注: v-mode1的三个修饰符:
v-mode1.lazy:失去焦点再收集数据
v-mode1.number:输入字符串转为有效的数字
v-mode1.trim:输入首尾空格过滤
-->
<h2>用户注册表单</h2>
<form @submit.prevent="submitForm">
<div>
<label for="username">账号:</label>
<input type="text" id="username" v-model="formData.username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="formData.password" required>
</div>
<div>
<label>性别:</label>
<input type="radio" id="male" value="male" v-model="formData.gender"> <label for="male">男</label>
<input type="radio" id="female" value="female" v-model="formData.gender"> <label for="female">女</label>
</div>
<div>
<label>爱好:</label>
<input type="checkbox" id="hobby1" value="篮球" v-model="formData.hobbies"> <label for="hobby1">篮球</label>
<input type="checkbox" id="hobby2" value="足球" v-model="formData.hobbies"> <label for="hobby2">足球</label>
<input type="checkbox" id="hobby3" value="游泳" v-model="formData.hobbies"> <label for="hobby3">游泳</label>
</div>
<div>
<label for="campus">所属校区:</label>
<select id="campus" v-model="formData.campus">
<option value="校区A">校区A</option>
<option value="校区B">校区B</option>
<option value="校区C">校区C</option>
</select>
</div>
<div>
<label for="other">其他信息:</label>
<textarea id="other" v-model="formData.other"></textarea>
</div>
<div>
<input type="checkbox" id="agreement" v-model="formData.agreement"> <label for="agreement">我已阅读并同意用户协议</label>
</div>
<button type="submit" :disabled="!formData.agreement">提交</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
formData: {
username: '',
password: '',
gender: '',
hobbies: [],
campus: '',
other: '',
agreement: false
}
},
methods: {
submitForm() {
// 在此处可以将formData对象转化为JSON数据 发送给服务器或执行其他操作
console.log('表单数据：', JSON.stringify(this.formData));
alert('表单提交成功！');
}
}
});
</script>
</body>
</html>
过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
</head>
<body>
<div id="app">
<!--
过滤器格式 value | 过滤的方法
{{time | timeFormater}}意思就是有一个timeFormater函数
对time这个值进行处理，返回的值当作显示在页面上的内容
-->
<h2>现在是：{{time | timeFormater}}</h2>
</div>
<script>
new Vue({
el: '#app',
data: {
time:1708404429838 // 时间戳
},
filters:{
timeFormater(value){
console.log(Date.now())
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}
}
});
</script>
</body>
</html>
第03章 Vue生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<h2 :style="{opacity}">欢迎你{{name}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'TenSoFlow',
opacity: 1
},
methods: {
},
// 以下都是生命周期函数
// 无法访问data中的数据 methods中的方法
beforeCreate(){
console.log('beforeCreate')
},
// 可以访问data中的数据 methods中的方法
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
// Vue完成模板的解析并把初始的真实DOM元素放入页面后调用mounted
mounted(){
setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
// 数据是新的，页面是旧的
beforeUpdate(){
console.log('beforeUpdate')
},
// 数据是新的，页面也是新的
updated(){
console.log('updated')
},
beforeDestroy(){
console.log('beforeDestroy')
},
destroyed(){
}
});
</script>
</body>
</html>
第04章 Vue组件
组件就是实现应用中局部功能代码和资源的集合
非单文件组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<school></school>
<hr>
<!-- 使用组件 -->
<student></student>
</div>
<script>
// 定义组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
// data必须写成函数式避免组件被重复使用时，数据存在引用关系
data(){
return {
name:'清华大学',
address:'北京'
}
}
})
// 定义组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
name:'张三',
age:18
}
}
})
new Vue({
el:'#app',
// 注册组件
components:{
school,
student
}
})
</script>
</body>
</html>
组件的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<school></school>
<hr>
</div>
<script>
// 定义组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
name:'张三',
age:18
}
}
})
// 定义组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<hr>
<student></student>
</div>
`,
// data必须写成函数式避免组件被重复使用时，数据存在引用关系
data(){
return {
name:'清华大学',
address:'北京'
}
},
components:{
student
}
})
new Vue({
el:'#app',
// 注册组件
components:{
school,
}
})
</script>
</body>
</html>
第05章 Vue模板
<template>
<div>
</div>
</template>
<script>
export default {
props: {},
components: {},
data() {
return {
}
},
computed: {},
created() {},
mounted() {},
methods: {
},
}
</script>
<style scoped>
</style>
第06章 Vue脚手架
Vue脚手架(Vue Cli)是Vue官方提供的标准化开发工具(开发平台)
使用步骤
第一步：全局安装@vue.cli (仅第一次执行)
在cmd窗口下执行下列命令
安装前先设置淘宝镜像加快安装速度：npm config set registry=http://registry.npm.taobao.org
然后执行安装命令：npm install -g @vue/cli
安装完成后重新打开cmd窗口输入vue按下回车能出现一大群字符则安装成功
第二步：在cmd中切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx xxxx为你想创建项目的名称
第三步：启动项目
npm run serve
第07章 Vuex
概念
专门在Vue中实现集中式状态(数据)管理等一个vue插件
作用
实现数据共享
安装
npm i vuex@3 //@后面可以指定版本号
第08章 Vue路由
简介
Vue的一个插件，专门用来实现SPA应用(单页面Web应用)，点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
安装
npm install vue-router@3 //@后面可以指定版本
Powered by Waline v2.15.8