vue自学笔记
- 优点
- 安装
- 使用scirpt标签引入（入门）
- CLI命令行工具搭建
- 新建vue工程
- 引入方式
- 创建vue应用
- 视图（html）
- 脚本(js)
- 数据与方法
- 创建vue实例
- 数据与方法
- Vue的实例属性和方法
- 生命周期
- 实例生命周期钩子
- vue初始化过程
- 生命周期（常用）
- 生命周期（涉及组件）
- 生命周期图示
- 实例生命周期钩子
- 模板语法
- 插值
- 文本
- 原始html
- 特性
- v-bind
- 使用JavaScript表达式
- 指令
- 参数
- 修饰符
- 缩写
- v-bind
- v-on
- 插值
- Calss与Style绑定
- 数组语法
- 对象语法
- 条件渲染
- v-if
- v-if
- template
- v-else
- v-else-if
- key
- v-show
- v-if和v-show的区别
- v-if
- 列表渲染
- 数组
- v-for="item in items"
- v-for="(item, index) in items"
- 对象
- v-for="value in object"
- v-for="(value, key) in object"
- v-for="(value, key, index) in object"
- 维护状态
- 数组
- 事件处理
- v-on
- 事件修饰符
- 绑定的事件
- 表单输入绑定
- v-model
- 基础用法
- 文本
- 文本域
- 复选框（数组）
- 单选
- 表单提交
- v-model
- 组件基础
- 组件实例
- 组件注册
- 组件名
- 组件名命名方式
- kebab-case
- PascalCase
- 全局注册
- 局部注册
- 单文件组件
- 使用单文件组件
- 免终端开发VUE应用
- cli方式
- 使用uni-app +HBuilder X
优点
- 体积小 33k
- 运行效率高
- 基于虚拟dom
- 预处理
- 双向数据绑定
- 生态丰富，学习成本低
安装
使用scirpt标签引入（入门）
- 下载并使用script标签引入（vue会被注册为一个全局变量）
- 开发环境不要用压缩版本（会失去所有常见错误的相关警告）
- 生产版本删除了警告
CLI命令行工具搭建
新建vue工程
-
下载开发版本的vue.js
-
将vue.js放入一个空的工程文件夹中
-
新建.html文件和.vue文件
-
在html文件中引入vue.js
引入方式
-
下载到本地并引入
-
CDN引入最新的vue.js
-
引入指定版本的vue.js
-
兼容 ES Module 的构建文件
-
创建vue应用
vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
视图（html）
{{ message }}
常见文本插值 {{}}
脚本(js)
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 声明全局变量Vue，得到vue.js的对象
- 参数：对象
- 参数对象的属性
- el
- 元素
- 利用id选择器选中div
- '#app'必须是单引号
- data
- 数据
- 注册变量，初始化变量
- el
数据与方法
创建vue实例
- 用vm接收对象实例（ViewModel 视图模型）
数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
- vm中的data为{ a: 1 }，可以用vm.a，也可以用vm.$data.a
- 只有在创建Vue对象时设置的数据才是响应式的
- 创建Vue之后添加的属性将不再是响应式的。
- 如果晚些添加属性的值，可以在初始化Vue对象的时候给该属性置空，以便之后修改。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
- Object.freeze(obj) 可以阻止修改现有属性，数据将不再响应。
Vue的实例属性和方法
-
有$前缀，与用户自定义的属性区分开
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
生命周期
实例生命周期钩子
vue初始化过程
- 数据监听
- 编译模板
- 将实例挂载到 DOM 并在数据变化时更新 DOM
- 会运行一些叫做生命周期钩子的函数，
- 这给了用户在不同阶段添加自己的代码的机会。
生命周期（常用）
- 要以属性的方式，写在传递的对象内
- 值是一个函数
- 函数不能使用箭头函数（箭头函数没有this）
- 在运行的每个阶段，系统会自动调用对应的函数
生命周期（涉及组件）
具体看API
-
actived
-
deactivated
-
beforeDestory
-
destory
-
errorCaptured
生命周期图示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g2aIjjXo-1650953238660)(D:\资料\typora\前端开发\vue\lifecycle.png)]
模板语法
插值
-
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
-
所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
-
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
- 在标签中绑定时，直接在引号中写属性名
文本
- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
Message: {{ msg }}
- v-once 这个将不会改变
- 但请留心这会影响到该节点上的其它数据绑定：
这个将不会改变: {{ msg }}
原始html
- 使用v-html使变量的值不再是字符串，而是html标签
var vm = new Vue({
el : "#app",
data : {
rawHtml : 'this is should be red',
}
});
特性
v-bind
- 绑定属性值
test...
var vm = new Vue({
el : "#app",
data : {
color:'red'
}
});
使用JavaScript表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
-
{{ number + 1 }} 简单运算
-
{{ ok ? 'YES' : 'NO' }} 三元运算符
- ok为false 输出NO，否则输出YES
-
{{ message.split('').reverse().join('') }} 函数运算
- 将字符串逐个拆分，反转，再拼接
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
现在你看到我了
var vm = new Vue({
el : "#app",
data : {
seen : false
}
});
参数
...
var vm = new Vue({
el : "#app",
data : {
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
}
});
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
- @click 绑定事件
- .stop 修饰符 执行click2的时候，不执行click
click me
var vm = new Vue({
el : "#app",
data : {},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
}
}
});
缩写
v-bind
...
...
...
v-on
...
...
...
Calss与Style绑定
-
数组语法
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '' ]"
-
对象语法
:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
hi vue
var vm = new Vue({
el : "#app",
data : {
isActive : true,
isGreen : true,
color : "#FFFFFF",
size : '50px',
isRed : true
}
});
条件渲染
v-if
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
A
B
C
Not A/B/C
var vm = new Vue({
el : "#app",
data : {
type : "B",
ok : false
}
});
template
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。
Title
Paragraph 1
Paragraph 2
v-else
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
key
- 允许用户在不同的登录方式之间切换
- 切换
loginType将不会清除用户已经输入的内容
- key的使用
- “这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的
keyattribute 即可 - 注意，
元素仍然会被高效地复用，因为它们没有添加keyattribute。
- “这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的
v-show
-
不同的是带有
v-show的元素始终会被渲染并保留在 DOM 中。 -
v-show只是简单地切换元素的 CSS propertydisplay。
Hello!
var vm = new Vue({
el : "#app",
data : {
ok : false
}
});
v-if和v-show的区别
-
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 -
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 -
相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
- 因此，如果需要非常频繁地切换，则使用
v-show较好； - 如果在运行时条件很少改变，则使用
v-if较好。
列表渲染
v-for
-
我们可以用
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。 -
你也可以用
of替代in作为分隔符，因为它更接近 JavaScript 迭代器的语法
数组
v-for="item in items"
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5UYPHstn-1650953238661)(D:\资料\typora\前端开发\vue\image-20220323111753940.png)]
v-for="(item, index) in items"
- 括号可以省略
-
{{ index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
对象
v-for="value in object"
-
{{ value }}
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4StoWY1d-1650953238662)(D:\资料\typora\前端开发\vue\image-20220323111726638.png)]
v-for="(value, key) in object"
- 括号可以省略
{{ key }}: {{ value }}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o9PNzcaP-1650953238663)(D:\资料\typora\前端开发\vue\image-20220323170216936.png)]
v-for="(value, key, index) in object"
{{ index }}. {{ key }}: {{ value }}
维护状态
-
当 Vue 正在更新使用
v-for渲染的元素列表时，它默认使用“就地更新”的策略。 -
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的
track-by="$index"。 -
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
-
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一
keyattribute： -
默认不改变节点顺序
- {{ index }} - {{ item.message }}
事件处理
v-on
- 把函数直接写在html中
- 把函数直接写在js中
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue"
},
methods:{
greet : function (str, e) {
alert(str);
console.log(e);
alert(this.name);//调用data数据
}
}
});
事件修饰符
-
在事件处理程序中调用
event.preventDefault()或event.stopPropagation()是非常常见的需求。 -
尽管我们可以在方法中轻松实现这点，但更好的方式是：
-
方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
-
为了解决这个问题，Vue.js 为
v-on提供了事件修饰符。 -
修饰符是由点开头的指令后缀来表示的。
...
...
绑定的事件
- dblclick 双击事件
- click 点击事件
- 撒打发
表单输入绑定
v-model
基础用法
你可以用 {{ message2 }}v-model 指令在表单 、
var vm = new Vue({
el : "#app",
data : {
message2 :"hi"
}
});
复选框（数组）
Checked names: {{ checkedNames }}
var vm = new Vue({
el : "#app",
data : {
checkedNames : ['Jack', 'John']
},
methods: {
submit : function () {
console.log(this.message);
}
}
});
单选
Picked: {{ picked }}
var vm = new Vue({
el : "#app",
data : {
picked : "Two"
}
});
表单提交
Message is: {{ message }}
{{ message2 }}
Checked names: {{ checkedNames }}
Picked: {{ picked }}
组件基础
组件实例
-
创建函数
- Vue.component('组件名称', {属性，数据，模板内容，方法})
-
模板
-
最外边用一个div，才能使模板中的元素全部渲染在页面上
-
插槽
-
可以插入任意的html标签
-
hi...h2
-
-
属性和方法可以在模板中进行使用
-
-
方法
- 触发事件
- this.$emit('clicknow', this.count);
- 传递 （事件名称，可携带参数）
- 点击按钮会调用这个方法
- 在html中 @clicknow="clicknow" 给该触发方法绑定vue实例中的方法
- 触发事件
-
组件复用
- 相互之间没有影响
hi...h2
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
props: ['title'],//属性
data: function () {//数据
return {
count: 0
}
},
template: 'hi...
组件注册
组件名
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：
该组件名就是 Vue.component 的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
组件名命名方式
两种方式
kebab-case
- 在引用这个自定义元素时使用 kebab-case，例如
Vue.component('my-component-name', { /* ... */ })
PascalCase
- 在引用这个自定义元素时两种命名法都可以使用。
- 也就是说
- 也就是说
- 注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
Vue.component('MyComponentName', { /* ... */ })
全局注册
- 这些组件是全局注册的。
- 也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (
new Vue) 的模板中。 - 在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
局部注册
-
全局注册往往是不够理想的。
- 比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
-
局部注册的方法
- 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
- 在Vue创建函数对象内声明components属性来局部注册组件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
- 注意局部注册的组件在其子组件中不可用。
- 例如，如果你希望
ComponentA在ComponentB中可用，则你需要这样写：
- 例如，如果你希望
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
- 通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：
- 引入组件 import ComponentA from './ComponentA.vue'
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
单文件组件
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
\ - 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
这是一个文件名为 Hello.vue 的简单实例：
使用单文件组件
-
安装服务
- 安装
npm
npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。npm -v- 由于网络原因 安装
cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org- 安装
vue-cli
cnpm install -g @vue/cli- 安装
webpack
webpack是JavaScript打包器(module bundler)cnpm install -g webpack - 安装
-
命令行 vue ui 启动vue cli图形化管理界面
-
新建工程
-
Package manager 选npm 默认设置
-
用hbuilder打开项目
目录结构
- public 打包之后用于部署到生产环境的目录
- src 开发目录
- components 组件目录
- HelloWord.vue 单文件组件
- App.vue
- components 组件目录
-
选择 npm run serve 运行项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0jPuawXH-1650953238664)(D:\资料\typora\前端开发\vue\image-20220324172913995.png)]
-
在控制台拿到地址复制到浏览器中进行浏览
-
新建自己的单文件组件
- template 模板/视图区域
- script 脚本区域
- style 样式区域
test...{{msg}}
-
在App.vue中引入test.vue 并注册
//这里msg的z 免终端开发VUE应用
cli方式
需要终端、node、npm等知识
- 搭建项目环境
- 运行和发布项目
- 配置less/sass/typescript/babel等预编译器
- 安装各种流行的组件库
使用uni-app +HBuilder X
-
框架和ide
-
实现免终端开发
-
在创建项目是选择uni-app
目录结构
- pages 业务页面文件存放的目录
- index
- index.vue index页面
- index
- static 存放应用引用静态资源（如图片、视频）的目录，静态资源只能存放于此
- main.js Vue初始化入口文件
- App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
- manifest.json 配置应用名称、appid、logo、版本等打包信息
- pages.json 配置页面路由、导航条、选项卡等页面类信息
- components 组件
- pages 业务页面文件存放的目录
-
发行
- 发行为网站-h5手机版本
- 会自动完成打包工作
- 在控制台获取路径，将打包的结果部署到服务器上
- 发行为网站-h5手机版本
-
工具-插件安装
-
uni-app的api 提高移动端的开发效率 组件，插件市场