vue课堂知识总结
-
- 显示文本框的渲染
-
- 原先的dom节点渲染
- 使用 vue 方法渲染
- 两者对比的区别
-
- 最明显的区别:
- 书写形式上
-
- js
- vue.js
- 模板使用js表达式
- 列表渲染
-
- 模板渲染
- 页面渲染
- 维护状态
- 条件渲染
- 数据绑定
-
- 内容绑定
- 属性绑定
- 表单控件的值
-
- `` 和 `` 的
- 复选框：
- 单选框
- 选择器
- 双向绑定
-
- 双向数据绑定是什么？
- 为什么要实现数据的双向绑定？
- 单项数据绑定
- 代码段
-
- vs code 添加代码段
-
- 如何操作用户自定义代码片段(快捷键)
-
- 第一步：文件==>首选项==>用户代码片段
- 第二步:新建全局代码片段文件或选择代码片段文件 html.json
- 第三步:快速生成添加以下代码段 vue 页面的基本结构
- 第四步：生成
- 常用代码块列表
-
- 通用js代码块
- dom代码块
- vue代码块
- 代码块配置格式说明
-
- key
- prefix
- body
- triggerAssist
- project
- 样式处理
-
- vue 操作 classs
- vue 操作 style
- 事件处理
-
- 案例：切换元素背景颜色
- 案例：切换壁纸
- 计算属性
-
- 格式化日期
-
- 进入moment文件，格式化时间
-
- 第一在线介绍moment文件
- 第二种:引入并保存在本地moment文件
- 三是介绍 npm 安装的moment文件
- 格式化时间的方法
-
- 使用计算属性格式日期
- 使用方法格式化日期
- 为什么我们需要缓存？
- 侦听属性
-
- 侦听器
-
- 实现侦听器功能的计算属性
- 搜索建议案例
- 表格的CURD
-
- 使用 BS添加样式版表格
- 简陋版表格
- 自动获取文本框的焦点
-
- 使用Vue.nextTick进入页面文本框自动获取焦点
- vue页面加载闪烁问题的解决方案
-
- 方法一：v-cloak
- 方法二： v-text指令
- 组件
-
- 什么是组件
-
- 组件注册分为全局注册和局部注册
- 组件可重复使用 Vue 例子，还有一个名字：
- 注册组件及使用
-
- 创建组件
- 组件注册：
-
- 定义组件的方式
- 使用组件
- 组件是vue实例
- 组件中的data
- props总结
-
- prop的命名
- 有两种解决方案
- prop的类型
- prop值不能直接修改
- 案例：博文项组件
- 遍历数据
-
- 遍历 list 组件
- 组件间的传值
-
- 传值方式
-
- 静态数据的传输
- 传输动态数据
- 静态或动态的传输 Prop
- 传值方向
-
- 父组件向子组件传值：
- 子组件向父组件传值
-
- 1.通过子组件绑定事件 this.$emit() 来触发
- 2.通过 callback 函数
- 3.通过 $parent / $children 或 $refs 访问组件实例
- 非父子组件传值
- 兄弟组件之间的传值
-
- 1.还是通过 $emit 和 props 结合的方式
- 2.通过一个空 vue 实例
- 3.使用 vuex
- 多层父子组件传值：
- 总结
- 组件中的事件
-
- 组件事件
- 组建的互斥效果
- 为组件绑定事件
-
-
- 根据id找到符合要删除的元素在数组中的索引
- 使用 forEach
-
- 为根组件注册事件
- 全局注册
- 局部注册
-
- 案例
- 组件嵌套
-
- 全局组件的嵌套
- 局部组件的嵌套
-
- 案例：使用局部变量实现效果
- 插槽
-
- 什么是插槽？
- 插槽内容
-
- 完整案例：
- 具名插槽
-
- 将上面使用局部变量实现效果的案例改造成占位符方式
- 路由
-
- 官方路由
- 后端路由与前端路由
- 自定义路由实现
-
- Hash 方法定义路由
- url中#(hash)的含义
-
- 1、#号的含义
- 2、HTTP请求不包括'#'
- 3、#后的字符
- 4、改变#不触发网页重载
- 5、改变#会改变浏览器的访问历史
- 6、window.location.hash读取#值
- 7、onhashchange事件
- 8、Google抓取#的机制
- vue Router
-
- 安装并引入路由文件
-
- 安装
- 引入
- 添加路由链接
- 添加路由填充位
- 创建组件
-
- 完整版案例
- 一个小知识点
显示文本框的渲染
原先的dom节点渲染
通过 js 主要做如下事情
- 通过 js 惊醒业务逻辑的处理，如对变量进行运算、获取服务器端数据、应用 js 中的函数对数据进行处理
- 通过dom 改变页面：比如 创建元素、添加元素、删除元素、设置和湖区元素的属性、设置和获取元素的style 样式、设置和获取元素的 class 样式、为dom注册事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" v-model="msg" id="msg" />
<br/>
<span></span>
<script>
// let input = document.querySelector('#msg')
// /*我们可以使用声明对象方法，来让他继续表示是当前事件的出发对象*/
// let that = input
// input.addEventListener('keyup',()=>{
// /**
// * 箭头函数中的this 不再是当前时间的出发对象，而是当前箭头函数所在环境的this
// * */
// console.log(that.value)
// })
/** * 但是为了代码简洁避免不必要的麻烦我们还是用function函数方法来写 * */
let input = document.querySelector('#msg'); //获取dom元素
let span = document.querySelector('span'); //获取dom元素
input.addEventListener('keyup',function(){
//为dom元素注册事件监听
span.innerHTML = this.value //将文本框中用户输入的数据赋值给span
})
</script>
</body>
</html>
使用 vue 方法渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 为文本框绑定了事件
事件名称：keyup
事件处理函数：changeMsg -->
<!-- <input type="text" v-model="txt" id="msg" v-on:keyup="changeMsg"/> -->
<input type="text" v-model="msg" id="msg"/>
<br/>
<span>{
{
msg}}</span>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// var app = new Vue({
// el: "#app",
// data: {
// txt:'',
// msg:'',
// },
// methods:{
// changeMsg: function () {
// this.msg = this.txt
// },
// },
// })
var app = new Vue({
el: "#app",
data: {
msg:'',
},
})
</script>
</body>
</html>
两者对比的区别
最明显的区别：
vue 中不用操作 dom 元素
这可以让来发这将精力集中在数据处理及业务逻辑开发中
书写形式上
js
//1.获取dom元素
let input = document.querySelector('#msg');
let span = document.querySelector('span');
//2.为dom元素注册事件监听
input.addEventListener('keyup',function(){
//3.将文本框中用户输入的数据赋值给span
span.innerHTML = this.value
})
vue.js
<!-- 1.创建dom结构 -->
<div id="app">
<!-- 6.通过插值表达式使用data中的数据 -->
<p>{
{
msg}}</p>
<p>{
{
age}}</p>
<p>{
{
books}}</p>
</div>
<!-- <div>{
{
msg}}</div> -->
<!-- 2.引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 3. 创建 vue 实例
let app = new Vue({
// 4.当前 vue 实例的挂载点是 id 为 app 的dom,其实设置的就是vue实例中变量的可用范围
el:"#app",
//5.data中是模型数据，这些数据依赖与当前的实例，可以在控制台中通过app.msg方式访问data中的msg数据
data:{
msg:'hello',
age:20,
books:['平凡世界','三国演义']
},
})
</script>
模板使用js表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<p>{
{
age +1}}</p>
<p>{
{
message.split('').reverse().join()}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
age:10,
message:'12345',
},
})
</script>
</body>
</html>
列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <p>{
{blogs}}</p> -->
<ul>
<!-- <li>{
{blogs[0]}}</li> <li>{
{blogs[1]}}</li> <li>{
{blogs[2]}}</li> -->
<!-- blog自定义的，blogs调用来的 -->
<li v-for="blog in blogs">{
{blog}}</li>
</ul>
<ul>
<li v-for="item in books">{
{item}}</li>
<li v-for="item in books">{
{item.title}}---- {
{item.author}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> let app = new Vue({
el: '#app', data: {
blogs: ['今天下雪了', '明天还下雪', '后天就30°了', '外面好冷啊'], books: [ {
id: 1, title: '庆余年', author: '忘了' }, {
id: 2, title: '鬼吹灯', author: '天下霸唱' }, {
id: 3, title: '盗墓笔记', author: '南派三叔' }, ], }, }) </script>
</body>
</html>
模板渲染
实际开发中，数据肯定是从服务器端获取
- created 函数会再 vue 实例实例化时执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in books">{
{item.title}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> let app = new Vue({
el: '#app', data: {
// books是实例化变量，无法访问外边的东西 books: [], }, // created 钩子可以用来在一个实例被创建之后执行代码： created: function() {
fetch('data.json') .then((res) => {
return res.json() }) .then((res) => {
// console.log(res) this.books = res }) }, }) </script>
</body>
</html>
data.json文件：
[
{
"id": 1, "title": "庆余年", "author": "忘了" },
{
"id": 2, "title": "鬼吹灯", "author": "忘了" },
{
"id": 3, "title": "盗墓笔记", "author": "忘了" }
]
页面渲染
可以在一个页面中创建多个挂载点，并创建多个 vue 实例，
将不同的 vue 实例与不同的挂载点相关联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<p>{
{name}}</p>
</div>
<div id="vm">
<p>{
{name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> // 可以在一个页面中创建多个挂载点，并创建多个 vue 实例， // 将不同的 vue 实例与不同的挂载点相关联 let app = new Vue({
el: '#app', data: {
name:'aa', }, }) let vm = new Vue({
el: '#vm', data: {
name:'zwj', }, }) </script>
</body>
</html>
维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
条件渲染
可以单独使用 v-if，或者 v-if 和 v-else，或者 v-if 和 v-else-if 搭配使用
v-if在单独使用的时候，与 v-show 的作用是一样的，都是根据变量的值决定是显示还是隐藏当前元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="UTF-8"