您现在的位置是：首页 > 前端学习 > VueVue

Vue使用(第一节)(图文)

第十三双眼睛2019-10-20【Vue】人已围观

简介vue学习第一章

首先在文件中引入vue的js文件
<script type="text/javascript" src="js/vue.js"></script>
然后开始写js代码
<script type="text/javascript">
var vm =new Vue({
el:'#main',
data:{
msg:'hello vue',
code:'1000001'
},
methods:{
}
});
</script>
el表示要控制的元素el是element的简写。
data是数据
methods是方法
整个页面如下：

在浏览器中打开如下：

此时，在刷新的过程中，{{msg}}，{{code}}这两个表达式会短暂的在屏幕上显示，怎么办呢，可以用v-cloak来解决，如下：
<div id="main">
<h1 v-cloak>{{msg}}</h1>
<h1 v-cloak>{{code}}</h1>
</div>
<style>
[v-cloak]{
display: none;
}
</style>

第二种解决方法：
使用v-text指令
<h1 v-text="code"></h1>,

如果数据是html代码如：msg1:'<h3>hello</h3>',则可以用v-html指令,如：

v-once ：只执行一次。以后再修改变量的值，页面上不会发生修改
如果想给标签的属性绑定值，可以用v-bind指令，如下：
<body>
<div id="main">
<h1 v-bind:title="title">哈哈哈</h1>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm =new Vue({
el:'#main',
data:{
title:'这是title'
},
methods:{
}
});

<h1 :title="title">哈哈哈</h1>
如果要绑定事件，如给按钮绑定点击事件，可以用v-on:click="",如下：
<body>
<div id="main">
<input type="button" value="click" v-on:click="f1">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm =new Vue({
el:'#main',
data:{
title:'这是title'
},
methods:{
f1:function(){
alert(111);
}
}
});

简写方法<input type="button" value="click" @click="f1">
控制标签的显示和隐藏用v-if指令，有两个值，true和false，如下：
<input type="button" value="click" v-if="false">
本质上是将代码注释和解开
也可以用v-show,本质上是使用display的显示和隐藏

遍历数组用v-for指令
<body>
<div id="main">
<ul>
<li v-for="(i,j) in list">{{i}}</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm =new Vue({
el:'#main',
data:{
list:[1,2,3,4,5,6,7,8,9]
},
methods:{
f1:function(){
alert(111);
}
}
});
其中i,j都是自己定义，i代表数据(value)，j代表索引(index)
v-for指令也可以来遍历对象。如下：
<body>
<div id="main">
<ul>
<li v-for="(val,key,i) in person">{{key}}--{{val}}--{{i}}</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm =new Vue({
el:'#main',
data:{
list:[1,2,3,4,5,6,7,8,9],
person:{
name:'xiaoming',
age:8,
weight:80
}
},
methods:{
}
});

其中，key代表键，val代表值，i代表下标
如果想要输出1-100，那么可以如下写法：
<li v-for="i in 100">{{i}}</li>
<li v-for="(num,i) in 100">{{i}}--{{num}}</li>此种写法可以输出值与下标，num表示值，i表示下标
v-for指令还可以便利对象

<div id="App">
        <span v-for="(value,key,index) in student">{{value}} -- {{value}} -- {{index}}</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                student:{
                    name:'zhangsan',
                    age:12,
                    sex:'女'
                }
            },
            methods:{
            }
        })
    </script>

效果如下图所示：

v-for也可以循环整数

<span v-for="number in 5">{{number}}</span>

效果如下图所示：

vue的计算属性computed

<div id="App">
        <span>原始字符串{{message}}</span>
        <span>反转后的字符串{{messageReverse}}</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                message:'hello'
            },
            methods:{
            },
            computed:{
                messageReverse(){
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>

具体效果如下图:

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
vue监听属性

<div id="App">
        <span>{{count}}</span>
        <button @click="count++">点我</button>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                count:0
            },
            methods:{
            },
            watch:{
                count(newVal,oldValue){
                    console.log(newVal+'---'+oldValue);
                }
            }
        })
    </script>

具体效果如下图:

样式绑定

具体效果如下图所示

vue的事件处理器

<div id="App">
        <button @click="dj">点击</button>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{

            },
            methods:{
                dj:function(){
                    console.log('按钮被点击了');
                }
            }
        })
    </script>

具体效果如下图所示：

事件修饰符
.stop阻止事件冒泡
.prevent:阻止默认事件，比如点击超链接标签的时候，默认事件是跳转到一个新的窗口，这个时候就可以利用这个来阻止跳转
.capture:阻止捕获
.self:只监听触发该元素的事件
.once:只触发一次
.left:左键事件
.right：右键事件
.middle：滚轮事件
按键修饰符
<input type="text" v-on:keyup.enter="keyup">
具体效果如下图所示：

全部的案件别名：
enter:回车键
.tab:制表键
.delete:删除和退格
.esc
.space
.up
.down
.left
.right
.ctrl
.shift
.alt
.meta
vue表单
数据的双向绑定v-model
使用v-model指令可以在表单控件元素上实现数据的双向绑定

<div id="App">
        <input type="text" v-model="message">
        <span>{{message}}</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                message:'hello'
            },
            methods:{
                keyup:function(){
                    console.log('按下了回车键');
                }
            }
        })
    </script>

具体效果如下：

<div id="App">
        <input type="checkbox" v-model="checked">
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                checked:true
            },
            methods:{

            }
        })
    </script>

具体效果如下图所示：

<div id="App">
        <input type="checkbox" value="java" v-model="checkeNames">java
        <input type="checkbox" value="c++" v-model="checkeNames">c++
        <input type="checkbox" value="c#" v-model="checkeNames">c#
        <span>你的选择是{{checkeNames}}</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                checkeNames:[]
            },
            methods:{

            }
        })
    </script>

具体效果如下图所示

<div id="App">
        <input type="radio" value="男" v-model="sex"/>男
        <input type="radio" value="女" v-model="sex"/>女
        <span>您的选择是{{sex}}</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                sex:'男'
            },
            methods:{

            }
        })
    </script>

具体效果如下图:

<div id="App">
        <select name="province" v-model="province">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="河北">河北</option>
        </select>
        <span>你的选择是{{province}}</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                province:'北京'
            },
            methods:{

            }
        })
    </script>

具体效果如下：

修饰符：
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<div id="App">
        <input type="text" v-model.lazy="province">
    </div>
    <script>
        var vue = new Vue({
            el:'#App',
            data:{
                province:'北京'
            },
            methods:{

            }
        })
    </script>

.number
如果想将用户输入的字符转为number，则可以使用该修饰符
<input type="text" v-model.number="age">
.trim
如果想自动过滤用户输入的首尾空格，可以使用该修饰符
<input type="text" v-model.trim="age">

小例子：

<div id="app">
           <div id="formWrap">
               <form id="form">
                   <label>课程名称：</label>
                   <input type="text" v-model="plan.name"/><br />

                   <label>开始时间：</label>
                   <input type="date" v-model="plan.startDate"/><br />

                   <label>结束时间：</label>
                   <input type="date" v-model="plan.endDate"/><br />

                   <button type="button" @click="addPlane">确认计划</button>
               </form>
           </div>
           <p>已经添加的计划</p>
           <table border="1" cellspacing="2" cellpadding="2">
               <tr>
                   <th>课程名称</th>
                   <th>开始时间</th>
                   <th>结束时间</th>
                   <th>删除计划</th>
               </tr>
               <tr v-for="(temp,index) in planList" :key="index">
                   <td>{{temp.name}}</td>
                   <td>{{temp.startDate}}</td>
                   <td>{{temp.endDate}}</td>
                   <td><button type="button" @click="delPlan(temp.name)">删除计划</button></td>
               </tr>
           </table>
       </div>
       <script>
           var vue = new Vue({
               el:'#app',
               data:{
                   // 一个学习计划
                   plan:{},
                   // 学习计划列表
                   planList:[]
               },
               methods:{
                   addPlane(){
                       console.log('添加学习计划');
                       this.planList.push(this.plan);
                       this.plan={};
                       console.log('添加数据成功')
                   },
                   delPlan(name){
                       console.log(name);
                       for(var i = 0;i<this.planList.length;i++){
                           if(this.planList[i].name === name){
                               // 这里传入两个参数，第二个参数表示删除1个元素
                               this.planList.splice(this.planList[i],1);
                               console.log('相同');
                           }
                       }
                   }
               }
           })
</script>

效果如下：

计算属性：computed
如果页面上要使用的数据需要经过处理才能得到，那么就可以用计算属性。

computed:{
                   finished(){
                       var finishPlanList = new Array();
                       for(var i=0;i<this.planList.length;i++){
                           if(this.planList[i].state=='已完成'){
                               finishPlanList.push(this.planList[i]);
                           }
                       }
                       return finishPlanList;
                   }
}

过滤器：filters
对指定的字符串转换为大写

filters:{
                   toUpperCase(value){
                       return value.toUpperCase();
                   }
}

表单域修饰符
number:转化为数字
trim:去除首尾空格
lazy:将input事件转换为change事件，避免了无用的事件
input事件：当表单内容改变就会触发
change事件：当失去焦点才会触发
写法：
<input type="text" v-model.number="age" />