Vue
一、Vue核心
1.1安装
- 本地
- CDN:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
hello
1.2hello world
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
- root容器里的代码被称为【Vue模板】;
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa'
}
})
</script>
</body>
1.3Vue 模板语法
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法:({xxx}.xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签（包括:标签属性、标签体内容、绑定事件…）。
举例: v-bind:href="xxx”或简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令，且形式都是: v-???，此处我们只是拿v-bind举个例子。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>插值语法</h2>
<h3>hello,{{name}}</h3>
<br/>
<h2>指令语法</h2>
<a v-bind:href="blog.url">我的博客</a>
<a :href="blog.url">简写</a>
<br/>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root',
data:{
name:'YoRHa',
blog:{
url:'https://blog.csdn.net/lushixuan12345'
}
}
})
</script>
</body>
1.4数据绑定
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上（如: input、select等)
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
<!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>
<script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
单向数据绑定: <input type="text" v-bind:value="name">
<br/>
双向数据绑定: <input type="text" v-model:value="name">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root',
data:{
name:'YoRHa'
}
})
</script>
</body>
</html>
1.5 el与data的两种写法
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>你好,{{name}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
//el:'#root',//第一种el写法
/*
第一种data写法 对象式
data:{
name:'YoRHa'
}
*/
// 第二种data写法 函数式
data:function(){
return{
name:'YoRHa'
}
}
})
setTimeout(() =>{
v.$mount("#root" );//第二种el写法
},1000);
</script>
</body>
1.6 数据代理
1.6.1 Object.defineProperty
<body>
<script type="text/javascript">
let number=18;
let person = {
name:"张三",
sex:'男',
}
Object.defineProperty(person, "age",{
//value:18, //此数值正常不会参与枚举,不可被修改,不可被删除
//enumerable:true,//控制属性是否可以枚举，默认值是false
// writable:true,//控制属性是否可以被修改,默认值是false
//configurable:true,//控制属性是否可以被朋除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get:function(){
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且收到的值就是修改的value
set:function(value){
number=value
}
})
console.log(person)
</script>
</body>
1.6.2 数据代理
<body>
<!--数据代理:通过一个对象代理对另一个对象中属性的操作（读/写)-->
<script type="text/javascript">
let obj= {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
1.6.3 Vue中的数据代理
getter setter 从data里获取
console vm的话 存在于_data中
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作（读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
1.7 事件处理
1.7.1 事件的基本使用
- 使用v-on :xxx或@xxx绑定事件，其中xxx是事件名;
- 事件的回调需要配置在methods对象中，最终会在vm 上:
- methods中配置的函数，不要用箭头函数!否则this就不是vm了;
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
- @click="demo 和@click="demo($event)”效果一致，但后者可以传参;
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好,欢迎来到{{name}}的博客</h1>
<button v-on:click="showInfo">点我提示信息</button>
<button @click="showInfo('YoRHa')">点我提示信息</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
el:'#root',
data:{
name:'YoRHa'
},
methods:{
showInfo(str){
//console.log(event.target.innerText)
//console.log(this)//此处的this是vml
//alert('你好')
console.log(str)
}
}
})
</script>
1.7.2 事件的修饰符
- prevent:阻止默认事件（常用）
- stop:阻止事件冒泡（常用）;
- once:事件只触发一次（常用）
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素是才触发事件;
- passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 阻止默认事件（常用） -->
<a href="https://blog.csdn.net/lushixuan12345" @click.prevent="showInfo">点我提示信息</a>
<!--阻止事件冒泡（常用) -->
<div @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!--事件只触发一次（常用）-->
<button @click.once="showInfo">点我提示信息</button>
<!--只有event.target是当前操作的元素时才触发事件:-->
<div @click.self="showInfo1">
<button @click="showInfo1">点我提示信息</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
el:'#root',
data:{
name:'YoRHa'
},
methods:{
showInfo(){
alert('你好')
},
showInfo1(){
alert(event.target)
}
}
})
</script>
</body>
1.7.3 键盘事件
vue中吊用的按键别名:
| 名称 | 按键 |
|---|---|
| 回车 | enter |
| 删除 | delete |
| 退出 | esc |
| 空格 | space |
| 上 | up |
| 下 | down |
| 左 | left |
| 右 | right |
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
- 系统修饰键(用法特殊）:ctrl、alt、shift、 meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。 - 也可以使用keyCode去指定具体的按键（不推荐)
4.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>hello,{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root',
data:{
name:'YoRHa'
},
methods:{
showInfo(e){
console.log(e.target.value)
}
}
})
</script>
</body>
1.8 计算属性
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2,原理:底层借助了objcet.definepropertyj法提供的getter和setter。
3.get函敬什么时候执行?
(1)初次读取时会执行一次。
(2)当依赖的数据发生改变时会被再次调用。
4.优势:!与methods实现相比，内部有缓存机制(复用），效率更高，调试方便。
5.备注:
1.计算属性最终会出现在vm上。直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓: <input type="text" v-model="firstName"> <br/><br/>
名: <input type="text" v-model="lastName"><br/><br/>
全名: <span>{{fu1lName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
computed:{
fu1lName:{
//get有什么作用?当有人读取fullName时，get就会被调用，且返回值就作为fullName的值get()
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。|
get(){
//this 此时是vm
return this.firstName + '-'+ this.lastName
},
//set什么时候调用?当fullName被修改时。
set(value){
console.log(value)
const arr = value.split( '-')
this.firstName = arr[o]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
1.9 监视属性
- 当被监视的属性变化时，回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视!
- 监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视 - 深度监视:
(1).vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变（多层）。 - 备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeweather()">切换天气</button>
<h2>a:{{number.a}}</h2>
<button @click="number.a++">点我a++</button>
<h2>b:{{number.b}}</h2>
<button @click="number.b++">点我b++</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
el:'#root',
data:{
isHot:true,
number:{
a:0,
b:0,
}
},
computed:{
info(){
return this.isHot ?'炎热':'凉爽'
},
},
methods: {
changeweather(){
this.isHot=!this.isHot
}
},
watch:{
isHot:{
immediate:true,//初始化时让hahdler调用一下
// handler什么时候调用?当isHot发生改变时。
handler(newValue,oldValue){
console.log("isHot被修改",newValue,oldValue)
}
},
//监视多级结构中某个属性的变化
'number.a':{
handler(){
console.log("a被改变了")
}
},
//监视多级结构中每个属性的变化
'number':{
deep:true,
handler(){
console.log("number中的某个属性被改变了")
}
}
},
})
// vm.$watch('isHot',{
// immediate:true,//初始化时让handler调用一下
// //handler什么时候调川?当isHot发生酸变时。
// handler(newValue, oldValue){
// console.log( 'isHot被修改了',newValue,oldvalue)
// }
// })
</script>
</body>
1.9 watch与computed对比
computed和lwatch之间的区别:
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的国调函数等、Promise的回调函数），最好写成箭头函数,这样this的指向才是vm或组件实例对象。
1.10 绑定属性
1.10.1 绑定class属性
<!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>
<script type="text/javascript" src="../JS/vue.js"></script>
<style>
.basic{
width:400px;height: 100px;border: 1px solid black;
}
.c1{
background-color: #cc66ff;
font-family: 'Courier New', Courier, monospace;
}
.c2{
background-color: #123456;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.c3{
background-color: #cdc3d3;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!--绑定class样式--字符串写法 适用于:样式的类名不确定,需要动态指定-->
<div class="basic" :class="mod" id="change" @click="changemod">hello,{{name}}</div>
<!--绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="modarr" id="change" @click="changemod">hello,{{name}}</div>
<!--绑定class样式--对象写法，适用于:要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="classobj">hello,{{name}}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
mod:"",
modarr:['c1','c2','c3'],
classobj:{
c1:false,
c2:false
}
},
methods: {
changemod(){
modArr=['c1','c2','c3']
const a=Math.floor(Math.random()*3)
this.mod=modArr[a]
}
},
})
</script>
</body>
</html>
1.10.2 绑定style属性
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div class="basic" :style="styleobj">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
const vm=new Vue({
el:'#root',
data:{
name:'YoRHa',
styleobj:{
fontSize:'40px',
color:'red'
}
},
})
</script>
</body>
1.11 渲染
1.11.1 条件渲染
1.v-if
写法:
(1).v-if=“表达式”
(2).v-else-if=“表达式”(3).v-else="表达式"适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法:v-show="表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!--使用v-show做条件渲染-->
<h1 v-show="true">hello,{{name}}</h1>
<!--使用v-if做条件渲染-->
<h1 v-if="true">hello,{{name}}</h1>
<!-- v-else和v-else-if -->
<button @click="num++">点我n+1</button>
<h1>{{num}}</h1>
<h1 v-if="num===1">我是1</h1>
<h1 v-else-if="num===2">我是2</h1>
<h1 v-else-if="num===3">我是3</h1>
<h1 v-else>啥也不是</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
num:0
}
})
</script>
</body>
1.11.2 条件渲染
v-for指令
1.用于展示列表数据
2.语法:v-for="(item,index) in xxx" :key=“yyy”
3.可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少)
虚拟DOM中key的作用:
- key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
（1).若虚拟DOM中内容没变,直接使用之前的真实DOM !
（2).若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。 - 用index作为key可能会引发的问题;
(1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==〉界面效果没问题，但效率低。
(2）如果结构中还包含输入类的DOM:
会产生错误DOM更新==>界面有问题。 - 开发中如何选择key? :
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<ul>
<li v-for="p in persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
</ul>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
persons:[
{id:'001' ,name:'张三',age:18},
{id:'002' ,name:'李四',age:19},
{id:'003' ,name:'王五',age:20}
],
car:{
name:"奥迪A8",
price: '70万',
color:"黑色"
}
}
})
</script>
</body>
1.11.3 列表过滤
<body>
<!-- 准备好一个容器 -->
<div id="root">
<input type="text" placeholder="请输入名字(模糊查询)" v-model="keyword">
<ul>
<li v-for="p in filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root',
data:{
keyword:"",
persons:[
{id: "001" ,name:'马冬梅' ,age:19,sex:'女'},
{id: "002" ,name:"周冬雨" ,age:20,sex:"女"},
{id: "003" ,name:'周杰伦' ,age:21,sex:'男'},
{id: "004" ,name:"温兆伦" ,age:22,sex:"男"}
],
filterPersons:[]
},
watch:{
keyword:{
immediate:true,
handler(val){
this.filterPersons=this.persons.filter((p)=>{
return p.name.indexOf(val)!==-1
})
}
}
}
})
</script>
</body>
1.11.4 列表排序
<body>
<!-- 准备好一个容器 -->
<div id="root">
<input type="text" placeholder="请输入名字(模糊查询)" v-model="keyword">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="p in filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root',
data:{
keyword:"",
sortType:0,
persons:[
{id: "001" ,name:'马冬梅' ,age:19,sex:'女'},
{id: "002" ,name:"周冬雨" ,age:20,sex:"女"},
{id: "003" ,name:'周杰伦' ,age:21,sex:'男'},
{id: "004" ,name:"温兆伦" ,age:22,sex:"男"}
],
},
computed:{
filterPersons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyword) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
</script>
</body>
1.11.5 Vue.set()
- 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property(比如 this.myObject.newProperty = ‘hi’)
- 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>信息</h1>
<button @click="addsex">添加一个性别属性，默认值是男</button>
<h2>姓名: {{student.name}}</h2>
<h2 v-if="student.sex">性别:{{student.sex}}</h2>
<h2>年龄:真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{
student:{
name : 'tom' ,
age:{
rAge:40,
sAge:29,
},
friends:[
{name: 'jerry' ,age:35},
{name : "tony" ,age: 36}
]
}
},
methods: {
addsex(){
Vue.set(this.student, "sex" ,"男")
}
}
})
</script>
</body>
1.11.6 Vue检测数据原理总结
- vue会监被data中所有房次的数据
- 如何监测对象中的数据?
通过setter实现监视,且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue.set(target.propertyName/index,value）或vm.$set(target.propertyName/index, value) - 如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板,进而更新页面。 - 在Vue修改数组中的某个元素一定要用如下方法:
(1). 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2). Vue.set(）或vm.$set() - 特别注意:Vue.set()和 vm.$set()不能给vm或 vm的根数据对象添加属性!! !
1.11.7 收集表单数据
-
若: input type=“text” 则v-model收集的是value值，用户输入的就是value值。
-
若: input type=“radio” ，则v-model收集的是value值，且要给标签配置value值。
-
若: input type=“checkbox”
(1).没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值)
(2).配置input的value属性:
(1).v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
(2).v-model的初始值是数组，那么收集的的就是value组成的数组 -
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
<body>
<!-- 准备好一个容器 -->
<div id="root">
<form @submit.prevent="submit">
<label for="aa">账号:</label> <!--点击账号文字时input框也能获取焦点-->
<input type="text" id="aa" v-model.trim="userInfo.usename">
<br/><br/>
<label for="bb">密码:</label>
<input type="password" id="bb" v-model="userInfo.password">
<br/><br/>
<label for="cc">年龄:</label>
<input type="number" id="cc" v-model.number="userInfo.age">
<br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<br/><br/>
爱好:
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
喜欢的颜色:
<select v-model="userInfo.color">
<option value="">请选择颜色</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="green">绿色 </option>
</select>
<br/><br/>
其他信息: <br/>
<textarea v-model.lazy="userInfo.word"></textarea>
<br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受
<a href="https://www.csdn.net/company/index.html#statement">《用户协议》</a>
<br/><br/>
<button >提交</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root',
data:{
userInfo:{
usename:'',
password:'',
age:"",
sex:'male',
hobby:[],
color:"",
word:"",
agree:""
}
},
methods: {
submit(){
console.log(JSON.stringify( this.userInfo))
}
},
})
</script>
</body>
1.12 过滤器
定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法:
1.注册过滤器:Vue.filter(name, callback)或new Vue{filters:{}}
2.使用过滤器:{{ xxx│过滤器名}}或v-bind:属性= “xxx|过滤器名"
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据,是产生新的对应的数据
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>hello,{{name}}</h2>
<!-- 计算属性体现-->
<h2>现在时间是{{fmtTime}}</h2>
<!-- 函数体现-->
<h2>现在时间是{{getfmtTime()}}</h2>
<!--过滤器实现-->
<h2>现在是：{{ time | timeFormater | myslice}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//全局过滤器
Vue.filter('myslice' ,function(value){
return value.slice(0,4)
})
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
time:1634467810852
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods: {
getfmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
//局部过滤器
filters:{
timeFormater(value,str="YYYY年MM月DD日 HH :mm: ss "){
return dayjs(value).format(str)
}
}
})
</script>
</body>
1.13 内置指令
1.13.1 v-html
- m作用:向指定节点中渲染包含html结构的内容。
- 与插值语法的区别
(1).v-htm1会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。 - 严重注意: v-html有安全性问题!!!
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>hello,{{name}}</h2>
<div v-html="str"></div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
str:"<h3>123</h3>"
}
})
</script>
</body>
1.13.2 v-cloak
1.本质是1个特殊属性，Vue实例创建完毕并接管容器后，会朋掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
1.13.3 v-once
- v-once所在节点在初次动态演染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-once>原始值是{{n}}</h2>
<h2 >n现在是{{n}}</h2>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
n:1
}
})
</script>
</body>
1.13.4 v-pre
- 跳过其所在节点的编译过程。
- 可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
1.13.5 自定义指令
一、定义语法:
(1).局部指令:
new Vue({
directives:{指令名:配置对象}
})或
new Vue({
directives{指令名:回调函数}
})
(2).全局指令:
Vue.directive(指令名,配置对象）或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元系成功绑定时调
(2).inserted:指令所在元素被插入页面时调用。
(3 ).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-，但使用时要加v-;
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2 >原始值是:<span v-text="n"></span></h2>
<h2 >n放大10倍是:<span v-big="n"></span></h2>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
n:1
},
directives:{
//函数何时会被调用?1.指令与元素成功绑定时。2.指令所在的模板被重新解析时
big(element,binding){
element.innerText=binding.value*10
},
fbig:{
//指令与元素成功绑定时
bind(element,binding){
console.log("bind")
},
//指令所在元素被插入页面时
inserted(element,binding){
console.log("inserted")
},
//指令所在的模板被重新解析时
update(element,binding) {
console.log("update")
},
}
}
})
</script>
</body>
1.14 生命周期
1.14.1引子
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2 :style="{opacity}">hello,{{name}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用。
name:'YoRHa',
opacity:1
},
methods: {
},
//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
mounted() {
setInterval(()=> {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
}
})
</script>
</body>
1.14.2 挂载
- beforeCreate:此时:无法通过vm访问到data中的数据、methods中的方法。
- created：此时:可以通过vm访问到data中的数据、methods中配置的方法。
- beforeMount：此时:
1.页面呈现的是未经Vue编译的DOM结构。
⒉.所有对DOM的操作，最终都不奏效。 - mounted：此时:
1.页面中呈现的是经过Vue编译的DOM。
2.对DOM的操作均有效(尽可能辟免)。
至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
1.14.3 更新
- beforeUpdate:此时:数据是新的，但页面是旧的，即:页面尚未和数据保持同步。
- updated:此时:数据是新的，页面也是新的，即:页面和数据保持同步。
1.14.4销毁
- beforeDestroy:此时: vm中所有的: data、methods、指令等等，都处于可用状态，马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
- destroyed
1.14.5 总结
将要创建===>调用beforeCreate函数。
创建完毕===>调用created函数。
将要挂载===>调用beforeMount函数。
(重要） 挂载完毕===>调用mounted函数。============= > 【重要的钩子】
将要更新===>调用beforeUpdate函数。
更新完毕===>调用updated函数。
(重要）将要销毁===>调用beforeDestroy函数。========>【重要的钩子】
销毁完毕===>调用destroyed函数。
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
