Vue基础语法

一、插值

1.文本插值

{{*}}

在Vue实例中定义了变量，就可以使用文本插值

2.v-html指令插值

<div v-html="vueHtml"></div>

new Vue({
            el:'#app',
            data(){
                return{
                     ,
                 vueHtml:'<span style="color: pink;">Vue对HTML代码的解析</span>',
                
                    
                }
            }
        })

3.属性插值

<!--
                     v-bind与v-model的区别 
                     v-model是做数据双向绑定的指令
                     v-bind只是将对应的值填写到指定属性中
                     例如：v-bind：value简单来说就是将值填写到value=“”
                     然后value的值发生改变，并不会影响Vue实例中变量值
                     v-bind:value可写成:value
                     -->
                    <input type="text" v-bind:value="msg" />

4.表达式

{{str.substr(0,6).toUpperCase()}}
                        {{ number + 1 }}
                        {{ ok ? 'YES' : 'NO' }}

二、指令

1.条件指令（if elseif else）

<input type="text" v-model="score" />
                    <div v-if="score>90">A</div>
                    <div v-else-if="score>80">B</div>
                    <div v-else-if="score>70">C</div>
                    <div v-else-if="score>60">D</div>
                    <div v-else="">E</div>

2.v-show

input type="text" v-model="show" />
                    <div v-show="show">出现</div>

3.v-for

<div v-for="item,index in arr">
                        {{item}},{{index}}
                    </div>
                    <div v-for="item,index in abjAtt">
                        {{item.name}},{{index}}
                    </div>

4.动态参数

<input type="text" v-model="evname" />
                    <!-- dblclick -->
                    <button v-on:[evname]="xxx">点我</button>

methods:{
                xxx(){
                    console.log('xxx方法执行')
                }

三、过滤器

1.局部过滤器

{{msg | a}}

filters:{
                a(v){
                    return v.substring(4);
                }

2.局部过滤器可串联

filters:{
                a(v){
                    return v.substring(4);
                },
                b(v){
                    return v.substring(3,12);
                }
            }

3.全局过滤器

Vue.filter('c',function(v){
            return v.substring(7);
        })

四、计算属性及监听属性

1.计算属性

数量：<input type="text" v-model="num" />
                    单价：<input type="text" v-model="price" />
                    计算总价：{{total}}

computed:{
                //在计算属性定义的时候,是可以获取到Vue实例中定义的任何变量
                total(){
                    return parseInt(this.num )* parseInt(this.price);
                }
            },

2.监听属性

km：<input type="text" v-model="km" />
                    m：<input type="text" v-model="m" />
                    

watch:{
                km(v){
                    this.m =v*1000;
                },
                m(v){
                    this.km=v/1000;
                }
            }