Vue笔记
Vue笔记
文章目录
- Vue笔记
- 1、为浏览器安装Vue开发者工具
- 2、创建第一个vue
- 2.1 引入vue.js文件
- 2.2 第一个vue
- 3、vue常用指令
- 3.1 v-if、v-else-if、v-else
- 3.2 v-show
- 3.3 v-show与v-if的区别
- 3.4 v-for
- 3.4.1 遍历数组
- 3.4.1 遍历对象
- 3.4.3 :key的作用
- 3.5 文本赋值
- 3.5.1 {{}}
- 3.5.2 v-once
- 3.5.3 v-html
- 3.5.4 v-text
1、为浏览器安装Vue开发者工具
- Git下载：https://github.com/vuejs/vue-devtools
下载完压缩包，解压到本地 - cnpm install
cmd，在控制台进入到该目录下，安装依赖包 - npm run build
编译项目文件 - 修改vue-devtools\shells\chrome 中 的manifest.json文件
persistent参数改为true
- 添加至chrome浏览器
找到Google的扩展程序，点击“加载已解压的扩展程序…”按钮；选择vue-devtools>shells目录下的Chrome文件夹
那个v就是了。
2、创建第一个vue
2.1 引入vue.js文件
三种引入方式
- 可以手动更新的指定版本号的连接引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
- vue.js文件引入（开发时使用最好）
下载地址：https://vuejs.org/js/vue.js
<script src="vue.js">script>
- vue.min.js文件引入（发布到线上引入这个）
下载地址：https://vuejs.org/js/vue.min.js
<script src="vue.min.js">script>
2.2 第一个vue
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{{msg}}h2>
div>
<script src="vue.js">script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello world"
}
});
script>
body>
html>
3、vue常用指令
3.1 v-if、v-else-if、v-else
根据传进来的数值的布尔类型控制显示页面的布局
当v-if的isShow为true，显示show
当v-if为false，v-else-if为true，显示elseIf
当v-if、v-else-if都为false时，显示else
比如：
<div id="app">
<div v-if="isShow">showdiv>
<div v-else-if="elseIf">elseIfdiv>
<div v-else>elsediv>
div>
<script src="vue.js">script>
<script>
new Vue({
el:"#app",
data:{
isShow: false,
elseIf:false,
}
});
script>
3.2 v-show
是根据传进来数值的真假，切换display属性
当为false时，display:none
比如：
当如下的isShow为false是，只显示emmm…
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#app div:nth-child(1) {
width: 200px;
height: 200px;
background: #dddddd;
}
style>
head>
<body>
<div id="app">
<div v-show="isShow">
show~~
div>
<div>
<span>emmmmmmmmmmmm..........span>
div>
div>
<script src="vue.js">script>
<script>
new Vue({
el: '#app',
data:{
isShow: false
}
})
script>
body>
html>
3.3 v-show与v-if的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
总结一下： 经常来回切换的元素就用v-show，不经常切换的，很少改变的用v-if
3.4 v-for
3.4.1 遍历数组
（1）v-for=“item in items”
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
li>
ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
（2）v-for="(item, index) in items"
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
li>
ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items">div>
3.4.1 遍历对象
（1）v-for=“value in object”
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
li>
ul>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
（2）v-for="(value, key) in object"
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
div>
（3）v-for="(value, key, index) in object"
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
div>
3.4.3 :key的作用
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
<div v-for="item in items" :key="item.id">
div>
建议尽可能在使用 v-for 时提供 key
它是 Vue 识别节点的一个通用机制
自己理解：
vue是虚拟dom，可以不操作dom直接操作数据就可以渲染页面，这里面就需要一个算法。算法实现的前提有两个，
1、相同的组件产生相同的dom，不同的组件产生不同的dom
2、同一层的一组节点，他们可以通过唯一的id进行区分
当有数据发生变化时，算法只会比较同一层级的节点，
如果节点类型不同，就直接干掉，然后创建再插入新的节点。算法不会比较这个节点以后的子节点。
如果相同，就直接更新里面的属性，从而实现更新。
下面有一个例子，参考：https://blog.csdn.net/qq_41861679/article/details/80659278
希望再B和C之间加一个F，算法默认执行是这样子的，
即把C更新成F，D更新成C，E更新成D，最后再插入E，效率很低，重点来了！！！！
如果加个key值，
使用key来给每个节点做一个唯一标识，算法就能识别出每个节点，找出正确的位置插入新的节点。
所以：key的作用主要是为了高效的更新虚拟DOM
3.5 文本赋值
3.5.1 {{}}
数据绑定最常用的方法，{{}}，会将对应的msg的值绑定上去，msg发生变化，插值处也跟着变化
<span>Message: {{ msg }}span>
3.5.2 v-once
使用v-once只会再第一次绑定，随后数值变化插值处不会再改变。
<span v-once>这个将不会改变: {{ msg }}span>
3.5.3 v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，使用v-html
<p>Using mustaches: {{ rawHtml }}p>
<p>Using v-html directive: <span v-html="rawHtml">span>p>
3.5.4 v-text
v-text和{{}}的作用一样
<span v-text="msg">span>
<span>{{msg}}span>
未完待续。。。