1. 简介
VUE是MVVM框架 Vue.js
是渐进式框架，对初学者友好，基本不需要什么前置知识
比如，react需要知道函数式编程，angular需要知道他们之间的依赖关系，vue初学的时候，都可以不用知道
本文是对于我学习vue的一套视频后，整理的学习笔记
2. 指令
vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载
v-if
通过一个布尔表达式对dom的上树和下树进行渲染
系列指令：v-if v-else-if v-else
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<input v-model="a" type="text"/>
<p v-if="a<100">{{b}} </p>
<p v-else-if="a>200">{{c}} </p>
<p v-else >{{d}} </p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: 100,
b: "a小于100的时候展示我",
c: "a大于200的时候展示我",
d: "a默认展示我"
}
})
</script>
</body>
</html>
v-show
显示情况类似，原理不一样，通过控制元素的display属性，对元素的显示和隐藏进行控制，并没有进行上树和下树
如果页面切换特别频繁，使用v-show，因为它不涉及上树、下树
如果页面涉及范围特别大，逻辑复杂，并且页面切换不频繁，使用v-if
v-for
v-for="(item,index) in arr" :key key用来给每一项值加元素标识，为了区分元素，实现最小量更新
遍历对象
v-for="(item,key,index) in obj" :key="index"
遍历数组
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<p v-for="(item,index) in a">{{item}} </p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: [100,200,300]
}
})
</script>
</body>
</html>遍历对象
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<p v-for="(item,key,index) in a" :key="key">{{key}}-{{item}} </p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: {
name:"张三",
age:18
}
}
})
</script>
</body>
</html>v-text
渲染，与{{}}相似
{{}}和v-text的区别
1.{{}}在渲染结果之前，隐约会有编译之前的文本内容，v-text是没有这种现象的
2.{{}}显示更灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<p v-text="a"></p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: "内容"
}
})
</script>
</body>
</html>v-html
v-html会识别html标签，中间也不允许插入内容
v-cloak
作用是vue实例渲染后结束关联
用法：
{{}}插值语法在遇到网络延迟的时候，会显示编译前的文本
可以使用v-cloak结合css解决渲染问题
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<p v-cloak>{{a}}</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: "<h1>我是h1标签</h1>"
}
})
</script>
<style>
[v-cloak]{
display:none;
}
</style>
</body>
</html>v-once
只会渲染对应的元素一次，数据更新不会引起视图的更新，目的是为了优化页面性能
使用场景通常是没有动态元素的内容，比如一些文章，固定标题
v-pre
作用：跳过该元素编译过程，直接显示元素内部的文本，特点就是跳过大量的没有指令的节点
优化页面的加载性能
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<p v-pre>{{a}}</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: "<h1>我是h1标签</h1>"
}
})
</script>
</body>
</html>
v-on
事件指令，给元素添加事件监听，可以简写为@，比如说onclick方法写成@click
适配js的原生事件，在vue中一律使用去除on，然后添加v-on，或者@
比如 onclick =》 @click 、v-on:click
需要注意的是，所有的方法都必须写在vue的methods中，不允许在外部罗列方法名称
原生的js事件方法不能和vue混用，比如，onclick在vue中不能使用
同名方法会覆盖
方法可以传入参数
如果方法中没有传入值，默认输入会有该方法的事件参数event
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<p>{{a}}</p>
<button @click="add">+1</button>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: 100
},
methods:{
add(){
this.a++
}
}
})
</script>
</body>
</html>
v-bind
将普通的w3c属性变为动态属性，让属性具有动态能力，可以用于参数拼接，可以简写为冒号：
v-bind:src =》 :src
动态的class必须要使用{}包裹，值可以有多个，值的参数是一个布尔值
除了class，还可以用于style
v-model
使用在表单元素中的，实现表单和数据的双向绑定，
输入框中的数据展示为data中的数据，改变输入框中的数据，data数据值也会随之发生改变
<html>
<head>
<title>vue学习</title>
</head>
<body>
<div id="app">
<input type="text" v-model="a"/>
<p>{{a}}</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
a: 100
}
})
</script>
</body>
</html>样例：调色板实现
<html>
<head>
<title>vue学习</title>
<style>
.colorBan{
width:300px;
height:300px;
background-color:blue;
}
</style>
</head>
<body>
<div id="app">
<p class="colorBan" :style="{backgroundColor:'rgb('+r+','+g+','+b+')'}"></p>
<p>
<input type="range" v-model="r" max="255" min="0"/>
<input type="number" v-model="r"/>
</p>
<p>
<input type="range" v-model="g" max="255" min="0"/>
<input type="number" v-model="g"/>
</p>
<p>
<input type="range" v-model="b" max="255" min="0"/>
<input type="number" v-model="b"/>
</p>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
r: 100,
g: 100,
b: 100,
}
})
</script>
</body>
</html>
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
