Vue.js基础总结(一)

一：v-cloak、v-text、v-html

<div id="app">
    {{msg}}    //插值表达式会出现闪烁问题
</div>

[v-clock]{
    display:none;   // 解决插值表达式的闪烁问题
}
<p v-clock>{{msg}}</p>

var vm=new Vue({
    el :'#app',
    data:{
        msg: '123'
    }
})


注意：插值表达式有闪烁问题，而v-text没有闪烁问题的


<p v-cloak>++++++{{msg}------</p>

<p v-text="msg">==========</p>
注意：v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，
不会把整个元素的内容都清空

<h1>我是v-html指令</h1>

<div v-html="msg">121212</div>   注意和v-text的细微区别

data:{
    msg: '<h1>我是v-html指令</h1>'
}




二：v-bind   绑定属性
v-bind是vue中提供的一个用于绑定属性的指令
<input type="button" value="按钮" title="myTitle">
这样是不行的，得告诉他myTitle是个变量
v-bind:title="myTitle"       v-bind:title="myTitle+'123'"

简写形式：   :title



三：v-on  绑定事件
<input type="button" value="按钮" v-on:click="alert">
@click="click"



四：跑马灯效果实现

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

var vm=new Vue({
    el: '#app',
    data:{
        msg:'我是最好的，相信自己，加油'
        intervalId:null  //在data上定义，定时器id
    }
    methods:{
      lang(){
            console.log(this.msg); 验证是否获得msg

            if(this.intervalId!=null)  return;

            this.inertalId=setInterval(()=>{       //定时器
                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;   为了让它停止后还能运行，就要设置为null，
        否则会一直return
      }
    }
})
重点：this的指向问题


分析：
1:给【浪起来】按钮绑定个点击事件  v-on 
2:在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring来进行字符串
的截取操作，把第一个字符截取出来，放到最后一个位置即可；
3：为了实现点击下按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去

注意：在vue实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.属性名或
this.方法名来进行访问，这里的this，就表示我们new出来的vm实例对象 



五：事件修饰符

.stop 阻止事件冒泡  

<div class="inner" @click="divHandler">
    <input type="button" value="点击" @click.stop="btnHandler">
</div>

.prevent 阻止默认行为
<div class="inner" @click="divHandler">
    <a href="www.baidu.com" @click.prevent="linkClick">点击</a>
</div>

.capture 实现捕获触发事件的机制
<div class="inner" @click.capture="divHandler">
    <input type="button" value="点击" @click="btnHandler">
</div>

.self 实现只有点击当前元素的时候，才会触发事件处理函数
<div class="inner" @click.self="divHandler">
    <input type="button" value="点击" @click="btnHandler">
</div>

注意：.stop和.self的区别  stop是全部阻止， self只阻止指定的



六：v-model 实现双向数据绑定

v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定
<input type="text" v-bind:value="msg" style="width:100%">

使用v-model指令可以实现表单元素和Model中数据的双向数据绑定
注意：v-model只能运用在 表单元素中

input(radio,text,address, email)  select checkbox textarea
<input type="text" style="width:100%" v-model="msg">




七：Vue中使用样式

使用class样式
1：数组
<h1 v-bind:class="['thin','italic']"></h1>

2：数组中使用三元表达式
<h1 v-bind:class="['thin','italic',flag?'active':'']"></h1>

3：数组中嵌套对象
<h1 v-bind:class="['thin','italic',{'active':flag}]"></h1>

4：直接使用对象
<h1 v-bind:class="{thin:true,italic:true,active:false}"></h1>




八：使用style样式（内联样式）
1:直接在元素上通过  :style形式，书写样式对象
<h1 v-bind:style="{color:'red','font-weight':200}"></h1>

2:将样式对象，定义到data中，并直接引用到:style中
<h1 v-bind:style="styleObj"></h1>

data:{
    styleObj:{color:'red','font-weight':200}
}

3:在:style中通过数组，引用多个data上的样式对象
<h1 v-bind:style="[styleObj1,styleObj2]"></h1>

data:{
    styleObj1:{color:'red','font-weight':200}
    styleObj2:{color:'red','font-weight':200}
}




九：v-for  key属性
迭代数组  迭代对象  迭代数字
<p v-for="item in items">{{item}}</p>

data:{
    return{
        id:'',
        name:''
        list:[1,2,3,4,5,6]
       }    
}

<p v-for="i in 10">这是{{i}}</p>

迭代对象中的属性
<div v-for="(val,key,index) in userInfo">{{val}}---{{key}}---{{index}}</div>

注意：在组件中使用v-for时，key值是必须的、

要注意的点，当实现添加功能时，在data的return中，name:'',id:''

报错：Avoid using primitive value as key,use string| number value instead

循环要指定个 :key="item",绑定item  报错，改为 :key="item.id"   因为id是唯一的，且为number类型

注意：key绑定的不能为对象，必须是string或number类型的