开启Vue知识点汇总之路（一）

欢迎和我开始学习Vue

从去年年底开始，学完Node之后开始了Vue的自学之路。真是一入前端深似海，在学习node的时候，边看学习视频，边觉得要学的还有好多啊，越学越觉得自己什么都不会，因为看视频的过程中，总会出现你没听过的前端技术，然后去google下，唉，一下拉出了好多不知道的。
废话不多说，到现在为止，已经把vue的几天的教学视频和练习都弄完，然后是时候来做个总结版的笔记了嘻嘻~

<div id="app">
    <div>
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
    </div>

    <p v-cloak>{{msg}}</p> 
    <div :class=cssname  @click="gclick">
        <div class="red" @click.stop="rclick">

        </div>
    </div>

    <input type="text"  v-model="id">
    <input type="text"  v-model="name">
    <input type="text"  v-model="age">
    <input type="button" value="添加" @click="add">
    <ul>
        <li v-for="item in stuList" :key="item.id"> {{item.id}} -- {{item.name}} -- {{item.age}}</li>
    </ul>
</div>
var vm = new Vue({
    el: '#app',//vue实例控制页面的区域
    data: {//el所需数据
        msg: '猥琐发育！~~~别浪',
        intervalId: null,
        cssname:['green'],
        id:'',
        name:'',
        age:'',
        stuList:[
            {
                id:1,
                name:"Alice",
                age:12
            },
            {
                id:2,
                name:"Bob",
                age:19
            },
            {
                id:3,
                name:"Cindy",
                age:17
            },
            {
                id:4,
                name:"David",
                age:14
            }
        ]
    },
    methods: {//当前vue实例中所需方法
        lang() {
            /*setInterval( () => {
                var start=this.msg.substring(0,1)
                var end=this.msg.substring(1)
                this.msg=end+start
            },400)*/
            var _this = this
            if(this.intervalId!=null){
                return;
            }
            this.intervalId = setInterval(function l() {
                var start = _this.msg.substring(0, 1)
                var end = _this.msg.substring(1)
                _this.msg = end + start
            }, 400)
        },
        stop(){
           clearInterval(this.intervalId)
            this.intervalId=null

        },
        rclick(){
            alert("dafas")
        },
        gclick(){
            alert("dafas2")
        },
        add(){
            this.stuList.push({id:this.id,name:this.name,age:this.age})
        }
    }

})

Vue实例

当我们导入了vue的包以后，在浏览器的内存中就多了一个vue的构造函数，而每个vue应用都需要通过实例化 Vue 来实现。

• el(vue实例控制页面的区域）
• data(存放的是el中要用到的数据)
• methods(存放的是当前vue实例中所需方法)

基本指令

v-cloak

当插值表达式放在页面上的时候，有那么一瞬间，用户可以看到页面上出现的变量名，这是因为真正的值要等到变量编译完成才会显示，而v-clock是为防止页面加载时出现 vuejs 的变量名而设计的。
那么这个指令需要放在什么位置呢？是否需要放置在每一个变量的标签呢？一开始以为是需要放置每个变量的标签，然而经测试，这个指令只需要挂载在vue实例所在的el上即可，这样就可以防止页面闪烁的问题啦！
但是我觉得这个指令对于简单的项目很实用，但是在工程化的项目里面，一般项目数据结构都是后来加载的，也就不再需要v-cloak这个指令了。

[v-cloak] {
  display:none !important;
}
<div class="#app" v-cloak>
    <p>{{msg}}</p>
</div>

v-text

v-text的用法比较简单，作用相当于插值表达式。

插值表达式&& v-text

1. 默认v-text是没有闪烁问题的
2. v-text会覆盖元素中原本的内容，但插值表达式智慧替换自己的占位符

<div class="#app" v-cloak>
    <p>{{msg}}</p>
     <p v-text="msg"></p>
</div>

v-html

v-html的作用是操作元素中的HTML标签。
v-text和插值表达式都不能展示内容里面的标签，都只是将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出。

v-bind（：）

v-bind是用于绑定属性的指令，可简写成：
v-bind：title="" v-bind将其当js执行，可在后进行拼接，当属性值有所变化时，就会重新渲染。

v-on（@）

v-on是用于绑定事件的指令，可简写成@
v-on：click=""，@click=""

事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调，只捕获自己的事件，只会组织自己冒泡行为的触发，并不会真正组织冒泡的行为
• .once 事件只触发一次
  注 事件修饰符可以串连，例如：@click.stop,且先后无关系。

v-model

v-model 主要是用于表单上数据的双向绑定，主要用于 input，select，textarea，component等表单元素。
v-bind 只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定。

设置样式

:css

1. 直接传递一个数组（这里的class需使用v-bind做数据绑定）
   :class="change" :class="['change12','change2']"
2. v-bind:class="{a:b,c:b}" a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式)

   :class="{changeColor:a,changeWidth:a}"
   //三元表达式
   :class="['a',flag?'b':'c']"
   //在数组中使用对象来代替三元表达式，提高代码可读性
    :class="['a',{'b':flag}]"

注 在为class使用v-bind绑定对象时，对象属性是类名，由于对象的属性可带引号也可不带引号:class="[{b:flag}]"

设置style

1. 直接在元素上通过:style书写样式对象（对象为无序键值对集合）
   :style="{color:'red'}"
2. 样式对象
   :style="styleObj" data:{styleObj:{} }
3. 数组样式
   :style= "[a,b]"

哈哈，今天我就先整理到这里啦，明天接着整理指令嘻嘻，感觉学完没多少，整理的时候才发现还不少呢。