VUE(一)

佚名 6年前 (2019-04-25) 随笔 1451人围观抢沙发百度已收录

一.Vue的基本语法

1.Vue是个渐进式框架,采用自底向上的增量开发,Vue关注图层.

2.使用Vue:

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

//1.引入Vue的核心JS文件,Vue会被当做全局变量使用
<script type="text/javascript" src="js/vue.js" ></script>
//2.准备Dom结构
<div id="app">
 //4.获取数据
    {{msg}}      
</div>
//3.实例化组件
<script type="text/javascript">
        var app=new Vue({
              e1:"#app",
              data:{
                     msg:"hello vue"         
    }
});
</script>

二.指令

1.文本渲染

1.是带有v-前缀的特殊属性.

2.功能:当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM.

1. v-text:显示数据

2. v-once:数据只会更新一次,下次更新数据不影响dom

3. v-html:可以显示html元素

<div id="app">
            <div v-text="msg"></div>
            <!--简写-->
            <div>{{msg}}</div>
            <hr />
            <div v-once>{{txt}}</div>
            <hr />
            <div>{{tpl}}</div>
            <div v-html="tpl"></div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                msg:"Hello",
                txt:"Hello Vue",
                tpl:"<h2>上海</h2>"
            }
        });
    </script>

2.class与style绑定

1.v-bind 可以绑定元素的属性,动态给属性赋值

比如: v-bind:class(:class) v-band:style(:style) v-bind:href(:href)

v-bind的简写形式

v-bind:属性名="组件中定义的数据" 简写为 :属性名="组件中定义的数据"

<body>
<div id="app">
            <div title="你好">Hello</div>
            <hr />
            <div v-bind:title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
            <div :title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
            <hr />
            <img :src="src"/>
            <a :href="href">Vue</a>
        </div>
</body>

<script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                msg:"Vue is very good",
                src:"https://cn.vuejs.org/images/logo.png",
                href:"https://cn.vuejs.org/"
                
            }
        });
    </script>

2.class绑定

绑定DOM对象的class样式有以下几种形式：

1.绑定多个class
2.使用对象classObject绑定
3.使用数组classList绑定
4.绑定的对象可以同时切换多个class
对象和数组绑定的区别：对象可以控制class的添加和删除；数组不能控制删除

<body>
<div id="app">
            <div class="red green item">Vue</div>
            <hr />
            <div :class="{red:true,green:false,item:true}">Vue</div>
            <div :class="classObj">Vue</div>
            <div :class="classList">Vue</div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                classObj:{
                    red:true,
                    green:false,
                    item:true
                },
                classList:["red","item","test"]
            }
        });
    </script>

3.style绑定

绑定形式跟class一致：
1.使用内联对象Object
2.直接传入对象styleObject
3.使用数组对象styleList

<body>
<div id="app">
            <div style="color:red;font-size: 30px;">我是文本</div>
            <div :style="{'color':'red','font-size':'30px'}">我是文本</div>
            <div :style="styleObj">我是文本</div>
            <div :style="[styleObj,styleObj2]">我是文本</div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                styleObj:{
                    'color':'red',
                    'font-size':'30px',
                    'font-family':'楷体'
                },
                styleObj2:{
                    'background':'pink'
                }
            }
        });
    </script>

三.事件处理

1.监听事件

v-on:事件名简写: @事件名

<body>
  <div id="app">
      count:{{count}} &nbsp;
    <button v-on:click="count++">add</button>
    <button @click="count--">down</button>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            count:0
            }
        });
</script>

2.事件方法

v-on:事件名简写: @事件名

方法事件处理器;
1.一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑.
2.需要在methods属性中定义方法，然后v-on引用对应相关的方法名.

<body>
   <div id="app">
    count:{{count}} &nbsp;
    <button @click="addCount()">add</button>
    <button @click="downCount">add</button>
   </div>
</body>
<script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                count:0
            },
            methods:{
                addCount:function(){
                    this.count++;
                },
                downCount:function(){
                    this.count--;
                }
            }
        });
</script>

3.$event事件

在事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传入.

4.事件修饰符

在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为）或 event.stopPropagation()（阻止事件冒泡到父元素）是非常常见的需求。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop ：阻止event冒泡，等效于event.stopPropagation()
prevent ：阻止event默认事件，等效于event.preventDefault()
capture ：事件在捕获阶段触发
self ：自身元素触发，而不是子元素触发
once ：事件只触发一次

<body>
<div id="app">
            <div @click="father">
                <div @click="child">child</div>
            </div>
            <hr />
            <!--stop ： 阻止event冒泡，等效于event.stopPropagation(-->
            <div @click="father">
                <div @click.stop="child">child</div>
            </div>
            <hr />
            
            <!--prevent ： 阻止event默认事件，等效于event.preventDefault()-->
            <a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
            <hr />
            
            <!--capture ： 事件在捕获阶段触发-->
            <div @click.capture="father">
                <div @click.capture="child">child</div>
            </div>
            
            <!--self ： 自身元素触发，而不是子元素触发-->
            <hr />
            <div @click.self="father">
                father
                <div @click="child">child</div>
            </div>
            <hr />
            
            <!--once ： 事件只触发一次-->
            <div @click.once="child">child</div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                father:function(){
                    console.log("父元素...");
                },
                child:function(){
                    console.log("子元素...");
                },
                prevent1:function(){
                    console.log("666....");
                }
            }
            
        });
    </script>

5.键值修饰符

键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<body>
<div id="app">
            <form action="http://www.shsxt.com">
                <input v-on:keyup.enter="submit">
                
                <!-- 只有在 keyCode 是 13 时调用 submit() -->
                <input v-on:keyup.13="enterKey">
            </form>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                enterKey:function(){
                    console.log("enter...");
                }
                
            }
            
        });
    </script>

四.条件渲染

1、v-if
当条件返回true时，执行
2、v-else
当if条件不满足时，执行（要结合v-if一起使用）
3、v-else-if
当满足条件时执行（要结合v-if一起使用）

4、v-show
满足条件时显示，不满足隐藏

v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。

<body>
<div id="app">
            <div v-if="flag">你能看见我！</div>
            &nbsp; {{flag}}
            <hr />
            <h3 v-if="age==18">
                张三是18岁
            </h3>
            <h3 v-else>
                张三不是18岁
            </h3>
            
            
            <hr />
            <h3 v-if="age>18">
                成年啦
            </h3>
            <h3 v-else-if="age==18">
                刚成年
            </h3>
            <h3 v-else>
                小屁孩
            </h3>
            
            <hr />
            <h4 v-show="flag">你能看见我！</h4>
            
            
        </div>
    </body>
    
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                flag:false,
                age:18
            }
        });
        
    </script>

五.列表渲染

1.v-for

可以把一组值进行列表渲染，语法形式： item in items，
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引

<body>
<div id="app">
            <ul>
                <li v-for="item in items">{{item.name}}</li>
            </ul>
            <hr />
            <ul>
                <li v-for="(item,index) in items">{{type}}--{{index}}--{{item.name}}</li>
            </ul>
            <hr />
            <ul>
                <li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li>
            </ul>
        </div>
    </body>
    
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                type:"水果",
                items:[
                    {name:'西瓜'},
                    {name:'苹果'},
                    {name:'菠萝'}
                    ],
                    person:{
                    name:'Tim',
                    age:12,
                    love:'music'
                }
            }
        });
        
    </script>

2.key属性

<body>
        <div id="app">
            <ul>
                <li v-for="item in items" :key="item.id">{{item.name}}</li>
            </ul>
            
        </div>
    </body>
    
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                items:[
                     {id:1,name:'西瓜'},
                     {id:2,name:'苹果'},
                     {id:3,name:'菠萝'}
                    ],
                    
            }
        });
        
    </script>

3.v-for取值范围

<body>
        <div id="root">
            <h3 v-for="index in 10">{{index}}</h3>
            
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:"#root"
            
        });
    </script>

六.表单输入绑定

1.表单效验

<body>
        <!--
            判断用户名长度不小于6
        -->
        <div id="root">
            <!--v-model：双向绑定，作用于表单元素，-->
            用户名：<input type="text" v-model="uname" @input="validTxt" /> <span :class="validClass">{{msg}}</span>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#root",
            data:{
                uname:"",
                msg:"",
                validClass:""
            },
            methods:{
                validTxt:function(){
                    console.log(this.uname);
                    // 判断用户名的长度是否大于等于6
                    if (this.uname.length >= 6) {
                        this.msg="验证成功"
                        this.validClass = "success";
                    } else {
                        this.msg="验证失败"
                        this.validClass = "error";
                    }
                }
            }
            
        });
    </script>

2.表单输入绑定

1.用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
2.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。
3.单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。

<body>
<div id="root">
            <!--文本框-->
            <input type="text" v-model="txtMsg" placeholder="请输入用户名..." />
            文本值：{{txtMsg}}
            
            <br /><hr /><br />
            <!--复选框-->
            <input type="checkbox" v-model="ck" /> &nbsp;选中状态：{{ck}}
            <br />
            <input type="checkbox" value="HTML5" v-model="lesson"> <label>HTML5</label>
            <input type="checkbox" value="JavaScript" v-model="lesson"> <label>JavaScript</label>
            <input type="checkbox" value="Vue" v-model="lesson"> <label>Vue</label>
            <p>多选结果：{{lesson}}</p>
            
            <br /><hr /><br />
            <!--单选框-->
            <input type="radio" value="yes" v-model="love"><label>喜欢</label>
            <input type="radio" value="no" v-model="love"><label>不喜欢</label>
            <input type="radio" value="all" v-model="love"><label>都喜欢</label>
               <p>是否喜欢: {{love}}</p>
               
               <br /><hr /><br />
            <!--下拉框-->
               <select v-model="selected">
                <option>西瓜</option>
                <option>苹果</option>
                <option>菠萝</option>
            </select>
            <h3>结果: {{selected}}</h3>
            
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#root",
            data:{
                txtMsg:"",
                ck:"",
                lesson:[],
                love:"",
                selected:""
            }
        
            
        });
    </script>

3.下拉框绑定

<body>
<div id="root">
            <select v-model="selected">
                <option v-for="item in list" :value="item.value">{{item.text}}</option>
            </select>
            
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el:"#root",
            data:{
                 list:[
                    {text:'西瓜', value:'1'},
                    {text:'苹果', value:'2'},
                    {text:'菠萝', value:'3'}
                 ],
                 selected:3
            }
        
            
        });
    </script>

4.修饰符

使用v-model绑定数据后，可以使用修饰进行数据处理：
.lazy：绑定数据默认实时更新，lazy可以在onChange触发
.number：返回数字类型的值，转换不成返回NaN
.trim：去除数据的前后空格

<body>
<div id="app">
            <p><input type="text" v-model.lazy="name">{{name}}</p>
            <p><input type="text" v-model.number="age"></p>
            <p><input type="text" v-model.trim="cont"></p>
            <p><button @click="show();">显示值</button></p>
        </div>
</body>    
<script type="text/javascript">
            
            new Vue({
                el:"#app",
                data:{
                    name:"",
                    age:"",
                    cont:""
                },
                methods:{
                    show:function(){
                        console.log(this.name);
                        console.log(typeof this.age);
                        console.log(this.age);
                        console.log(this.cont);
                    }
                }
            });
    </script>