第一章 知识储备
javascript
HTML
CSS
第二章 介绍
Vue是一套用于构建用户界面的渐进式框架。其特点是易用、灵活、性能最省。注意的是：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
安装：https://cn.vuejs.org/js/vue.js
第三章 Vue实例化创建对象
<body>
<div id="app">
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#id属性值',
// 数据获取
data:{
// 在这里放所需数据
},
// 函数方法
methods:{
}
})
</script>
第四章 模板语法
1、差值表达式：利用“{{}}”将值展示在html页面中。
<body>
<div id="app">
<!--① 显示第一个值 -->
{{a}}
<!-- ②可以返回函数 -->
<br>
{{b()}}
<!-- ③可以使用运算符 -->
<br>
{{c+d}}
<!-- ④三元运算符 -->
<br>
{{e>f?"d大":"f大"}}
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data:{
// 在这里放所需数据
// ①显示到页面中
a:"我是显示的第一个值",
// ②可以返回函数
b:function(){
return "我是返回的函数"
},
// ③可以使用运算符
c:1,d:2,
// ④三元运算符
e:5,f:10
}
})
</script>
3、指令
v-text：将数据内容原样显示到页面中
<body>
<div id="app">
<p v-text="a"></p>
<p v-text="b"></p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data:{
a:"v-text将文本内容原样显示在页面中",
b:"<s>v-text</s>"
}
})
</script>
v-html：功能与innerHTML同等
<body>
<div id="app">
<p v-html="a"></p>
<p v-html="b"></p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data:{
a:"v-html",
b:"<s>v-html</s>"
}
})
</script>
v-show：显示隐藏
<body>
<div id="app">
<!-- 值为true显示标签 -->
<p v-show="a">123</p>
<!-- 值为false影藏标签 -->
<p v-show="b">456</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data:{
a:true,
b:false
}
})
</script>
v-if，v-else，v-else-if：判断
<body>
<div id="app">
<!-- 如果a的值大于b则显示该标签 -->
<p v-if="a>b">a是大于b</p>
<!-- 否则显示该标签 -->
<p v-else>b大于a</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data:{
a:10,
b:11
}
})
</script>
v-for：循环遍历数组显示到页面上去
<body>
<div id="app">
<ul>
<!-- 语法：v-for="(值,键) in 数组名" -->
<li v-for="(val,key) in arr">{{val}}-----{{key}}</li>
</ul>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data:{
arr:['a','b','c','d','e']
}
})
</script>
v-on：事件绑定
<body>
<div id="app">
<!-- 语法： v-on:事件类型="函数名" -->
<input type="button" value="btn1" v-on:click="cli">
<!-- 简写形式: @事件类型="函数名" -->
<input type="button" value="btn2" @click="cli2">
<!-- 事件修饰:@事件类型.修饰属性="函数名" ，v-on:事件类型.修饰属性="函数名"-->
<input type="text" @keyup.enter="keys">
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data: {
a: "弹出数据"
},
methods: {
cli: function () {
alert(this.a);
},
// 简写
cli2: function () {
alert('我是简写');
},
// 事件修饰属性
keys: function () {
alert('绑定成功');
}
}
})
</script>
v-bind：绑定属性
<div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}">
hei
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
redColor: 'red',
font: 40
}
});
</script>
数据绑定-单向数据绑定
<body>
<div id="app">
{{a}}
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data: {
a: "弹出数据"
}
})
</script>
数据绑定-双向数据绑定(v-model)
<body>
<div id="app">
<input type="text" v-model="val">
{{val}}
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data: {
val:""
}
})
</script>
v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
<body>
<div id="app">
<p v-once>{{val}}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
// 数据获取
data: {
val:"v-once"
}
})
</script>
v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div id="app">
<p>{{obj.id}}</p>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: { id: 1, name: '李四' }
},
})
}, 2000);
</script>
第五章 MVC与MVVM设计思想
MVC 设计思想：
M: model 数据模型层 提供数据
V: Views 视图层 渲染数据
C: controller 控制层 调用数据渲染视图
一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
MVVM 设计思想：
M: model 数据模型层 提供数据
V: Views 视图层 渲染数据
VM：ViewsModel 视图模型层 调用数据渲染视图
它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
第六章 其它知识点
1、计算属性和侦听器
计算属性
<body>
<div id="app">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</body>
<script>
// 实例化Vue函数对象
var app = new Vue({
// 根据id属性值查找目标节点对象
el: '#app',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
侦听器
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化，侦听器就会被执行，且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
this.fullname = newVal+this.ming;
},
ming:function(newVal,oldVal){
this.fullname = this.xing+newVal;
}
}
})
</script>
2、ref操作DOM
<div id="div">
<input type="button" @click='click' value="按钮"> <br>
<!--给p标签添加一个ref属性值为“P”-->
<p ref="P">123</p>
</div>
<script>
var app = new Vue({
el: '#div',
methods: {
click: function () {
// 使用vue ref 属性获取dom数据
var d = this.$refs.P.innerHTML;
console.log(d);
}
}
})
console.log(app.$refs);
</script>
3、过滤器的使用
<!--私有过滤器的定义-->
var app = new Vue({
el: '#app',
data:{msg:'UP'},
//定义过滤器
filters:{
// 过滤器的名称及方法
myFilters:function(val){
return val.toLowerCase();
}
}
})
<!--如果需要过滤器在所有实例对象中可用，我们需要声明 全局过滤器 -->
<div id="app">
<input type="text" v-model="msg"> <br>
{{msg|myFilters}}
</div>
<!-- 定义两个DOM节点 -->
<div id="app2">
<input type="text" v-model="msg"> <br>
{{msg|myFilters|get3}}
</div>
<script>
Vue.filter('myFilters', function (val) {
return val.toLowerCase();
})
// 定义两个全局过滤器
Vue.filter('get3', function (val) {
return val.replace('苍井空','***');
})
// 两个Vue 实例
var app = new Vue({
el: '#app',
data: {
msg: ''
}
})
var app2 = new Vue({
el: '#app2',
data: {
msg: ''
}
})
</script>
第七章 Vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
<div id="app">
{{ msg }}
<input type="text" ref="txt" v-model="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'hello vue',
dataList: []
},
// 在vue对象初始化过程中执行
beforeCreate(){
console.log('beforeCreate');
console.log(this.msg);// undefined
},
// 在vue对象初始化完成后执行
created() {
console.log('created');
console.log(this.msg);//hello vue
}
// ……
});
</script>
第11章 单页应用
11.1 单页应用
- 什么是单页应用单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。
- 单页应用优缺点
-
- 缺点
- 首次加载大量资源(可以只加载所需部分)
- 对搜索引擎不友好
- 学习难度相对较高
优缺点都很明显，但是我们都还没尝试过就来评价，就会显得空口无凭；接下来我们先来学习制作单页应用，然后再来进行点评；
11.2 vue路由插件vue-router
路由 — Vue.jscn.vuejs.org
介绍 | Vue Routerrouter.vuejs.org
<!-- 引入路由 -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<ul>
<li><a href="#/login">登录</a></li>
<li><a href="#/register">注册</a></li>
</ul>
<!-- 路由中设置的组件会替换router-view标签 -->
<router-view></router-view>
</div>
<script>
// 1:定义路由组件
var login = {
template: '<h2>我是登录页面</h2>'
}
var register = {
template: '<h2>注册有好礼</h2>'
}
// 2:获取路由对象
var router = new VueRouter({
// 定义路由规则
routes: [
// {请求的路径,componet是模板}
{ path: "/register", component: register },
{ path: "/login", component: login },
]
})
var app = new Vue({
el: '#app',
// ES6 属性简写
// 3:将router对象传入Vue
router
})
</script>
上例中，在HTML中我们直接使用了 a 标签，但是这样并不好，因为官方为我们提供了 router-link 标签
<div id="app">
<ul>
<li><router-link to="/login">登录</router-link></li>
<li><router-link to="/register">注册</router-link></li>
<!-- <li><a href="#/login">登录</a></li>
<li><a href="#/register">注册</a></li> -->
<!-- router-link 会被解析为a标签 -->
<!--
不同的是，router-link在解析为a标签后，
会自动为点击的 a 标签添加class属性
-->
</ul>
<!-- 路由中设置的组件会替换router-view标签 -->
<router-view></router-view>
</div>
使用 router-link 的一大好处就是，每当我们点击时，在标签内就会自动帮我们添加 class 属性，而此时，我们就可以利用 class 属性，来定义样式：
<style>
.router-link-active {
color: red;
}
</style>
11.3 动态路由匹配
假设有一个用户列表，想要删除某一个用户，需要获取用户的id传入组件内，如何实现呢？
此时可以通过路由传参来实现，具体步骤如下：
- 通过 <router-link> 传参，在路径上传入具体的值
<router-link to="/users/120">用户管理</router-link> - 路由规则中增加参数，在path最后增加 :id
{ name: 'users', path: '/users/:id', component: Users }, - 在组件内部可以使用，this.$route 获取当前路由对象
var Users = {
template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
mounted() {
console.log(this.$route.params.id);
}
};
转播
