vue框架初学习的基本指令

       学习地址：<ahref="https: cn.vuejs.="" org="" "="" target="_">https://cn.vuejs.org/

                vue海量案例

                

                 首先引入vue.js;

                

                之后实例化以下vue

                

                var vm = new Vue({

                

                 el: '#app',

                

                data:{

                message:'Hello Word',

                selectIndex: -1,

                

                meg: 'hello vue!',

                

                isShow: 'false',

                

                value:'A',

                

                arr: ['item1', 'item2', 'item3', 'item4'],

                

                obj: { name: 'zhangsan', age: 40 },

                

                str: 'dcwqnfeng'，

                classVal：'red'||'red yellow' ||['red', 'yellow']||{red: true,yellow:false,blue: true,green: true}||['red', {yellow: true, green: false}, 'blue'],

                

                styleVal: {

                width: '500px',

                height: '500px',

                "background-color": 'red',

                backgroundImage: 'url(https://cn.vuejs.org/images/logo.png)',

                border: '10px solid #666' }

                },

                

                

                

                methods: {

                testAction: >function(...rest){

                console.log(this.message);

                //rest即所有参数 

                

                console.log('参数：', ...rest);

                },

                itemAction(index){

                

                console.log('点击了',index);

                this.selectIndex = index;

                } }

                }) 

                

                 1.指令:

  

                 给标签添加属性 v-<指令名字>="js表达式"

                 指令会根据标签的不同，添加不同的功能

                (1).v-text:相当于innerTextinnerText

                

                例：v-text="message"，v-text="1+2+3+message"

               简写：<span v-text="dd"></span>

               

                v-text="message"相当于{{message}}

                

                (2).v-html 功能相当于innerHtml

                

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

                

                (3).v-if 功能：通过控制标签是否存在在dom中来控制标签的显示

                

                <div class="box" v-if="isShow">box</div> 

                 <div class="box" v-if="value=='A'">box1-A</div>

                 <div class="box" v-else-if="value=='B'">box2-B</div>

                 <div class="box" v-else-if="value=='C'">box3-C</div>

                 <div class="box" v-else>box4-D</div>

                (4). v-for 遍历的指令 数组的遍历：

<li v-for="(value, i) in arr">{{value}}--{{i}}</li>

<li v-for="(value, i) in ['item1', 'item2', 'item3', 'item4']">{{value}}-------{{i}}</li>

                

                  对象的遍历：

<li v-for="(v, k) in obj">{{v}}-----{{k}}</li>

<li v-for="value in obj">{{value}}</li>

                 <li v-for="(v, k) in {}">{{v}}-----{{k}}</li>

字符串的遍历：

<li v-for="item in str">{{item}}</li>

<li v-for="(item, index) in str">{{item}}-----{{index}}</li>

                数字的遍历：

<li v-for="num in 10">

<li v-for="(num, index) in 10">

<li v-for="(num, index) in arr.length"> {{num}}------------{{index}} </li>

      

                 (5).v-on指令：绑定事件。

                

               

                

                 1.以前的所有的事件都可以在vue中实现，写法发生了变化

                 2.方法的配置可以加()方便传参。事件对象需要通过$event传递。也可以不加()，事件对象方法直接获得。

                 例：<button v-on:click="testAction()">按钮</button> 例：<button v-on:click="testAction">按钮3</button> 例：<div @:mousedovm.prevent="testAction($event) @contextmenu.stop.prevent="boxContextmenu"">按钮2</div>

                

                例：<button v-on:click.stop.once="testAction('a', 'b', 'c', $event)">按钮1</button>

                

                .prevent修饰，阻止默认事件/.stop修饰，阻止事件冒泡/.once修饰，事件只执行一次

                (6).v-bind：绑定属性.(属性： src href id name type title alt ....)

                

                例子：<img v-bind:src="path"> 简写：<img :src="path+'?where=super'">

                

                class的绑定属性 例子：<div class="box" :class="classVal"></div>

                

                style的绑定属性 <div style="width: 500px; height: 500px;background-color: red; background-image: url(https://cn.vuejs.org/images/logo.png); border: 10px solid #666"></div>

                

               

                

                <div :style="styleVal"></div>

                (7).bind-class练习 <li v-for="(item, index) in arr" :class="{active: selectIndex==index}" @click="itemAction(index)">{{item}}---{{index}}</li>

                

                (8).v-model 专门绑定表单数据

                

                <p>message:{{message}}</p> <input type="text" v-model="message">

                 

                

                 (9).自定义指令,在使用该指令的实例创建前声明指令:参数1：指令名字; 参数2:指令的实现函数

                

                    Vue.directive('hello', (el, info)=>{

                 

                

                        // el: 指令所作用的元素

                        // info：指令相关的信息

                        console.log('hello指令调用了');

                        console.log(el, info);

                        el.innerHTML = info.value;

                        })

                (10).自定义过滤器 

                

                语法：<any>{{表达式 | 过滤器}}</any> 

               Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

                

                <!-- 在双花括号中 -->

                {{ message | capitalize }}

                <!-- 在 `v-bind` 中 -->

                <div v-bind:id="rawId | formatId"></div>

                 你可以在一个组件的选项中定义本地的过滤器：

                filters: {

                  capitalize: function (value) {

                    if (!value) return ''

                    value = value.toString()

                    return value.charAt(0).toUpperCase() + value.slice(1)

                  }

                }

                或者在创建 Vue 实例之前全局定义过滤器：

                Vue.filter('capitalize', function (value) {

                  if (!value) return ''

                  value = value.toString()

                  return value.charAt(0).toUpperCase() + value.slice(1)

                })

                 

                new Vue({

                  // ...

                })

                (11).v-pre 解析dom时，跳过这个标签，不解析这个标签中的所有内容，可以保留双花括号（v-cloak、v-test）

                例：<p v-pre>{{你好！}}</p>