开课吧WEB全栈架构师第六期视频教程-vue2.0基础标签

el 不能直接设置为body
1.v-bind绑定属性可以简写:title="数据+'字符串'" 绑定:src,绑定:href

<body>
    <div id="div1" :title="name+'111'">{{name}}</div>
</body>
<script>
let vm=new Vue({
    el:"#div1",
    data:{
        name:"syq"
    }
})
</script>

:class class可以为字符串也可以为数组

<body>
    <div id="div1">
        <a :href="name" :class="class_str">{{name}}</a>
        <img :src="name" :class="class_arr" />
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            name: "https://cn.bing.com/sa/simg/hpc26.png",
            class_str:"class1 class2 class3",
            class_arr:["class1", "class2", "class3"]
        }
    })
</script>

：style="" 可以为字符串也可以为对象

<body>
    <div id="div1">
        <a :href="name" :style="style_str">{{name}}</a>
        <img :src="name" :style="style_json" />
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            name: "https://cn.bing.com/sa/simg/hpc26.png",
            style_str:"width:30px;color:#f00",
            style_json:{
                "width":"300px",
                "color":"#f00"
            }
        }
    })
</script>

2.v-model="" 双向数据绑定 v-model 返回的数据都是字符串

<div id="div1">
<input type="text" v-model="name">
<p>{{name}}</p>
</div>
<script>
var vm=new Vue({
el:"#div1",
data:{
name:"syq"
}
})
</script>

加减法运算

<div id="div1">
<input type="text" v-model="n1"/>+
<input type="text" v-model="n2">=
{{parseInt(n1)+parseInt(n2)}}
</div>
<script>
var vm = new Vue({
el: "#div1",
data: {
n1:0,
n2:0
}
});
</script>

加减法简单运算，写在methods中,需要加{{sum()}}

<div id="div1">
<input type="text" v-model="n1"/>+
<input type="text" v-model="n2">=
{{sum()}}
</div>
<script>
var vm = new Vue({
el: "#div1",
data: {
n1:0,
n2:0
},
methods: {
sum(){
return parseInt(this.n1)+parseInt(this.n2)
}
}
});
</script>

3..v-html 可以解析html v-text 和{{}}插入内容一样
v-text 和{{}}区别：v-text 适用于全部输出，{{}}适用局部输出，但是要配合v-cloak适用

<body>
    <div id="div1">
        <div>{{str}}</div>
        <div v-html="str"></div>
        <div v-text="str"></div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str: `<p>11月26日，一段题为“张家口经开区国土局局长接访时玩手机”的视频在网络平台流传。</p>
<p>11月26日，一段题为“张家口经开区国土局局长接访时玩手机”的视频在网络平台流传。</p>
<p>11月26日，一段题为“张家口经开区国土局局长接访时玩手机”的视频在网络平台流传。</p>`
        },

    })
</script>

4.methods 事件 this 代表vm v-on:cliack 简写为 @click methods 中写函数方法

<body>
    <div id="div1">
        {{a}}
        <input type="button" value="+1" @click="fn(5)">
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            a: 3
        },
        methods: {
            fn(n) {
                this.a += n
            }
        }
    })
</script>

5.show和if 显示隐藏
v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。if 控制dom节点
v-show：调整css dispaly属性，可以使客户端操作更加流畅。 show 控制的css
if 可以配合else 使用

<body>
    <div id="div1">
        <input type="button" value="显示隐藏" @click="fn()" />
        <div class="box" v-if="b">111</div>
        <div class="box" v-else>222</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            b: true
        },
        methods: {
            fn(n) {
               this.b=!this.b
            }
        }
    })
</script>

6.v-for 使用循环的时候，最好把key加上
循环数据

<body>
    <div id="div1">
        <h1 v-for="(item,index) in users" :key="index">{{item.name}}</h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            users: [{
                    name: "blue",
                    password: "123456"
                },
                {
                    name: "zhangsan",
                    password: "654321"
                },
                {
                    name: "lisi",
                    password: "111111"
                }
            ]
        },
    })
</script>

循环json

<body>
    <div id="div1">
        <h1 v-for="(val,name) in style" :key="index">{{name}}-{{val}}</h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            style: {
                width: "200px",
                height: "300px;"
            }
        },
    })
</script>

循环字符串

<body>
    <div id="div1">
        <h1 v-for="s in str" :key="index">{{s}}</h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str:"djsklajdalk"
        },
    })
</script>

循环数字

<body>
    <div id="div1">
        <h1 v-for="i in 50" :key="index">{{i}}</h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str:"djsklajdalk"
        },
    })
</script>

7.v-pre 预编译提高性能防止意外不用编译，写的什么直接输出

<body>
    <div id="div1">
        <h1 v-pre>{{str}}</h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str:"djsklajdalk"
        }
    })
</script>

8.js 会按顺序加载，如果有的没加载出来，则不会继续执行v-cloak 隐藏，数据出来了，则显示一定要写css

<body>
    <style>
        *[v-cloak] {
            display: none;
        }
    </style>
    <div id="div1">
        <h1 v-cloak>{{str}}</h1>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str: "djsklajdalk"
        }
    })
</script>

9.事件修饰符可以加多个事件，而且没有顺序

stop 禁止冒泡 （冒泡从内到外冒泡 @click.stop）
once 单次事件 只执行一次，但并不影响冒泡
.native 原生的（组件中使用）
.key(keycode|name)（提交留言，或者斜杠出现下拉列表）筛选按键
.keydown
.keydown.enter() =.keydown.13()按回车 执行
.keydown.ctrl.enter()组合键
prevent 阻止默认事件

stop 冒泡、阻止冒泡

<body>
    <div id="div1">
        <div @click="fn()">
            <input type="button" value="按钮" @click.stop="fn2()"/>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str: "djsklajdalk"
        },
        methods: {
            fn(){
                alert("1")
            },
            fn2(){
                alert("2")
            }
        }
    })
</script>

once 只发生一次

<body>
   <div id="div1">
       <div @click="fn()">
           <input type="button" value="按钮" @click.once="fn2()"/>
       </div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#div1",
       data: {
           str: "djsklajdalk"
       },
       methods: {
           fn(){
               alert("1")
           },
           fn2(){
               alert("2")
           }
       }
   })
</script>

@keydown.enter/@keydown.13

<body>
    <div id="div1">
        <div @click="fn()">
                <input type="text" value="按钮" @keydown.enter="fn()">
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            str: "djsklajdalk"
        },
        methods: {
            fn(){
                alert("1")
            }
        }
    })
</script>

组合键

<input type="text" @keydown.ctrl.enter="fn()">

.prevent阻止默认跳转事件

<body>
    <div id="div1">
        <form action="index.html" method="post" @submit.prevent="submit()">
            <input type="submit" value="提交">
        </form>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {},
        methods: {
            submit() {
                alert("提交")
            }
        }
    })
</script>

self 处理自己的事件（冒泡的不认）

<body>
    <div id="div1">
        <div @click.self="fn()">
            <input type="button" value="按钮" @click="fn2()" />
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {},
        methods: {
            fn() {
                alert("fn")
            },
            fn2() {
                alert("fn2")
            }
        }
    })
</script>

methods 与computed区别

1.计算是没有区别的

computed优势： 变量 
1.具有缓存 性能高，不会自己重新计算，只有修改才会重新计算，
实时计算的，当检测到修改数据的时候，他会把根据这项数据相关的computed 值都计算一遍
2.方便 既可以读也可以写（和变量一样，变量可以出现的地方，他就可以出现）可以包含多个事件
3.属性的形式存在的，（v-model 不可以绑定方法，但是可以绑定变量）
methods 方法
方法只要输出就会重新计算

computed 与methods

<body>
<div id="div1">
<!--{{a}}+{{b}}={{sum()}}-->
{{a}}+{{b}}={{sum}}
</div>
</body>
<script>
let vm = new Vue({
el: "#div1",
data: {
a: 12,
b: 5
},
methods: {
// sum() {
// return this.a + this.b
// }
},
computed: {
sum() {
return this.a + this.b
}
}
})
</script>

computed 读写 get set

<body>
    <div id="div1">
        姓:<input type="text" v-model="family">
        名:<input type="text" v-model="givenName">
        <input type="text" v-model="name" />
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#div1",
        data: {
            family: "s",
            givenName: "yq"
        },
        computed: {
            name: {
                get() {
                    return this.family + this.givenName
                },set(value){
                    this.family=value[0];
                    this.givenName=value.substring(1);
                }
            }
        }
    })
</script>