vue笔记

1)vue基础

1、绑定插值指令

1 {{ }} ：绑定文本 （类似与innerText）

①　{{}}中可以写JavaScript表达式
{{n==10?"n=10":"n=20"}}//三目运算符
②　{{}}中不可以写语句和流程控制
/*(错误的写法）
{{if(n==10) n==100;}}
*/
③　{{}}中不能同时写多个字段数据
{{msg,scc}}

2v-html指令(innerHtml)

<div id="app" v-html="msg">
    var vue=new Vue({
        el:"#app",
        data:{
            msg:"<h1>和嘎哈啊</h1>",
        }
    })

3 v-bind绑定属性 :title

//简写 ：title="msg"
<img v-bind:title="msg"/>

4 v-on绑定事件 @click

//简写  @click="fn"
<button v-on:click="fn">button</button>
data{
    fn:function(){
        alert("事件绑定！")
    }
}

5 v-model 绑定input的val等表单

<input  v-model="hh">
    data{
       hh:"hasdeifh",
    }
  --------->双向绑定！！

6 v-pre 让指令不编译

v-pre指令 ：让所有的vue指令不编译，原封不动的输出

7:title 、 @click="fn"

语法糖--指令缩写

v-bind:title="msg"------------------->：title="msg"

v-on:click="fn"   ------------------->@click="fn"

8 指令绑定值问题

（字符串--非字符串）

①　指令值为字符串(那么它会去找data里面的，找不到就会报错)
②　指令值为非字符串（ru :数字，布尔，数组，对象，函数等都可以解析）
<div v-html="1234"></div>
<div v-html="false"></div>
<div v-html="[1,2,3,val]"></div>
<div v-html="{name:val}"></div>

2 基本指令

1 v-cloak 【编译完成就销毁】

解决网页网速，加载慢地时候会出现{{msg}}，即里面的值还没有出来进行渲染的问题`

//用法
[v-cloak]{
    display: none;
}
<div id="test"  v-cloak>
</div>
3.提示
一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是当我们使用webpack+vue-router路由来对前端进行工程化时，项目的html结构就只有一个空的div元素，剩余的内容全部都会由路由去挂挂载不同的ui组件，此时就不再需要v-cloak指令了。

2 v-once 【只渲染一次】

//一进来（或者刷新）就只渲染一次，
<div id="app" v-once></div>

3 v-if 之条件渲染指令

4 v-if 、v-else-if 、v-else

v-if执行的是销毁操作

//注意一点
v-if 或者v-else-if="n=1"成立的才会出现该对应dom元素，其他都会销毁

5 v-show添加的display:none属性。

v-show 实现，display:none;样式的切换！

//用法和v-if一样，执行的不是销毁操作
//但他会实现，display:none;样式的切换！

6 v-for之循环渲染指令

主要看参数问题

<div v-for="(item index) of arr">{{item}}</div>
<div v-for="(value key index) in abj">{{value}}---{{key}}</div>

7 v-for =“item of arr”

v-for="(item ,index) in json"

渲染数组之双向绑定

/*
1>
vueAPP.items[0]=11;
vueAPP.items.length=1;
这两种方式都不会被vue检测到，都不会触发视图的更新。(vue里可以看到改变了数据，但不会再view层显示)
如果想这样做又想被vue检测到，那么请使用splice方法来代替（常用）
*/
通过以下方法使数组本身发生了变化时会触发更新
Push(),pop(),shift(),unshift(), splice(),sort(),reverse(),
2>
但是如果我们通过下标修改数组，或者直接修改数组长度时，vue是不能检测到的，也不会触发视图更新。
vueAPP.items[0]=11;
vueAPP.items.length=1;

8 template标签不会渲染本身

template标签来包裹要渲染的一批元素此时自己标签不会出现自己出现子集的标签---如果父级是div来循环div 就消不掉

<template v-for="item in obj">
    <h1>{{item}}</h1>
</template>
----->此时页面element只会出现h1标签

3 v-bind之class、style绑定样式

1. 给v-bind:class设置一个文本值

2. 给v-bind:class设置一个对象【推荐】

3. 给v-bind:class设置一个数组

4.style绑定

.d1 {color: red;}
.d2 {border: 1px dashed blue;}
.d3 {font-size: 40px;}
<div id="test">
    <div :class="classarr">hahhhahah</div>
    <div :style="styles">hahhhahah</div>
</div>
var vue = new Vue({
    el: "#test",
    data: {
        classT: "d1 d2 d3", //文本
        //***************对象(推荐使用)**************
        classObj: {
            d1: true,
            d2: true,
            d3: true,},
      
        classarr: ["d1", "d2"],  //数组形式
        //**************style推荐使用***************
        styles: { color: "red", border: "1px solid blue", "font-size": "30px" },
    },
})

4 v-model 绑定表单

1 onchange 、v-model 、oninput

onchange//失去焦点触发
v-model//英文时和oninput差不多，但汉字的时候先要加进去才触发
oninput//只要改变就改变触发

2)v-model绑定文本框【单行/多行】

<!-- 单行文本和多行文本 (两者方式差不多)-->
<input type="text" v-model="msg">---{{msg}}
<textarea name="" id="" cols="10" rows="8" v-model="msgtextarr"></textarea>

3)v-model绑定单选按钮【值为文本】

<!-- 单选按钮 -->
<input type="radio" v-model="danxuan" value="男">男
<input type="radio" v-model="danxuan" value="女">女---->>{{danxuan}}
data:{
	danxuan: "男",
}
<!--
(1)v-model
(2)value
(3)data 数据（当danxuan的值====value值相同的就被选中）
-->

4)v-model绑定复选框

<!-- 多选按钮 -->
<input type="checkbox" value="游泳" v-model="checkboxs">游泳
<input type="checkbox" value="下棋" v-model="checkboxs">下棋
<input type="checkbox" value="睡觉" v-model="checkboxs">睡觉
----{{checkboxs}}
data:{
 checkboxs: ["睡觉", "游泳"],
}
<!--
(1)v-model
(2)value值关注
(3)data 数据（当 checkboxs值====value值相同相应的就被选中）
-->

5)v-model绑定下拉框`

<!-- 单项下拉框 -->
<select v-model="select">
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
</select>--->{{select}}

<!-- 多项分组下拉框 -->
<select v-model="selects" size="8" multiple="multiple">
    <optgroup label="第一组">
        <option value="2019">2019</option>
        <option value="2018">2018</option>
        <option value="2017">2017</option>
        <option value="2016">2016</option>
    </optgroup>
    <optgroup label="第二组">
        <option value="2016">2015</option>
        <option value="2016">2014</option>
        <option value="2016">2013</option>
    </optgroup>
</select>--->{{selects}}
data:{
select: "2016",
selects: ["2016", "2019", "2013"],
}

1 size="8" multiple="multiple"<----->这样才能多项选择

2 绑定下拉框其实就是像是单选按钮和多选按钮的组合

6) v-model绑定日期

具体实现代码

<script>
    var vue = new Vue({
        el: "#test",
        data: {
            msg: "hah",
            msgtextarr: "666677",
            danxuan: "男",
            checkboxs: ["睡觉", "游泳"],
            select: "2016",
            selects: ["2016", "2019", "2013"],
            date: "2019-11-06",
        },
        methods: {
        }
    })
</script>

5 v-model指令之修饰符详解

一、v-model修饰符

1 .lazy

//让v-model-->onchange灵敏度，让事件同步就会变为change
//加了.lazy修饰符，事件同步就会变为change，这样只要输入框失去焦点后才会同步。
//其他lazy加载

2 .number

让输入框内容自动的转换为number类型

<input type="number" v-model.number="text"/>
{{text}}--{{typeof text}}
data: {
text:66,
},

3 .trim

去除输入框的值的首尾空格

<input v-model.trim="text"/>------{{text}}----
data: {
text:" 测试文本 ",
},

6、v-on修饰符

1.stop 阻止事件冒泡

2．.prevent 阻止事件得默认行为

3.self 只有当事件在元素本身上(而非子元素)触发时执行回调函数

4 .once 只触发一次

5.capture 谁有这个修饰符，就先触发谁

capture :捕获的意思

然后若有多个该修饰符，则由外而内触发-----》可以实现逆向事件触发。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CWtcfMDY-1573214330324)(.\images\v-on修饰符.png)]

<div @click="fn">
<button @click.stop="fn1">按钮</button>
</div>

这些修饰符可以链式的写法

6．@click.capture.stop 修饰符可以链式调用
7．@click.capture.stop 可以只给修饰符而不给具体事件函数
<div class="d1" @click.capture.stop>
<div class="d2" @click.capture="fn1">
<div class="d4" @click="fn">
<button>按钮</button>
</div>
</div>
</div>
这段代码点击按钮后什么都不会执行,因为点击按钮后最先触发的应该是最外层div,但是这个div什么事件都没有绑定,然后由于在这个div上加了stop修饰符,所以冒泡也被阻止了,即事件到此终止....

五、vue进阶

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEPkrgfK-1573214366138)(.\images\vue实例.png)]

1 vue实例对象介绍

(1)El 元素节点

(2)Data 数据集合

(3) Methods 方法集合

(4)Computed 计算属性

computed----> 用来干嘛的？（性能和缓存）
1.对于函数体内运算过程较大，但是响应式数据（主要data里面的数据）不会发生改变的业务实现，我们应该使用计算属性以提高性能.----------------------->(即：Computed)
2.如果你需要实时的最新数据，很明确不需要缓存或者你一定要传参。那么请使用方法，方法执行后时刻都是最新的数据（当然这会耗损一些性能）---------------------->(即：methods)
3.什么时候用？---》针对性能的时候，计算复杂的数据的时候，想用缓存的结果
//详细写法
computed: {
    fn:{
        get:function(){
            return this.msg;
        },
        set:function(newmsg){
            this.msg= newmsg;
        }
    }
},

2 响应式数据？主要data里面的数据

3 和methods的区别？

 1 写法，它的方法不加括号调用，函数结果为一个结果
 2 methods中的方法可以加括号调用（等价其）其次不加括号时结果为函数结构
<td colspan="5">总价：{{countprice}}元</td>

(5)Filters 过滤器（转换器）

响应后端的数据：后端给我们传的数据1、0代表男，女时我们前端经过filter处理可以给用户展示具体的男女

<!-- 响应式相应：象data里的数据 -->
 <div id="test">
{{msg}}</br>
姓名：{{name|fname}}</br>
性别：{{sex|fsex}}</br>
日期：{{data|fdata}}
</div>
<script>
    var vue = new Vue({
        el: "#test",
        data: {
            msg:"hellow",
            sex:1,
            data:"2019-11-2",
            name:"zs",
        },
        filters: {
            fname(init){
                if(init=="zs"){return "张三"}
                else return "zs";
            },
            fsex(init){
                if(init==0) return "男"
                else return "女"
            },
            fdata(init){
                return init.replace("-","年").replace("-","月")+"日"
            }
        },
       
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gKXrMWqG-1573214366139)(.\images\filter.png)]

(6)watch -->监/侦听属性

监听data里的数据，函数名为data相应的数据

//用来侦听如data里的数据变化的
//注意这里的n函数名为data中监听的数据
data:{
    n:18;
}

watch:{
n: function (age) {
    if (age == 18) { alert("you成年了") }
    if (age == 25) { alert("可以成家了") }
    if (age > 25) { alert("你不小了！！") }
}
},
/**********参数1:改变的值newv 参数2：久值************/   
watch: {
flag: function (newv, oldv) {
alert("新值：" + newv + " 旧值：" + oldv);
}
},

过滤器应当用于处理简单的文本转换，如果要实现更复杂的数据变换，应该使用计算属性。