从vue入门到熟练

顺晟科技

2021-09-21 12:42:21

159

vue的简介

Vue是一套用于构建用户界面的渐进式框架

Vue开发版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue生产版本(项目发布时使用)

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue的安装

所谓的安装就是把以上script标签导入到我们的html中。
如果我们需要下载下来Vue.js文件，我们可以复制src标签中的地址粘贴到浏览器，复制其中的内容，粘贴到我们新建的js文件当中，导入到html中就可以使用了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            
        </div>
    </body>
    <script src="js/VUE-v2.6.10.js"></script>
</html>

VUE入门

在Vue中所有代码都是以键值对形式来体现的

el 元素

data 数据

给id为app的div加上内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue-v2.6.10.js" ></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    message: "VUE学习之旅"
                }
            });
        </script>
    </body>
</html>

页面显示效果

VUE学习之旅

再{{ }}中可以进行数值运算（插值表达式）

事件

在vue事件后后可以拼接多个修饰符

click点击事件

在javascript中我们定义一个函数在按钮标签中加入onclick为点击事件

而在Vue中的点击事件是v-on:后面是事件名click，双引号中是我们的方法名

<button v-on:click="fun1"></button>

v-on: 可以缩写为@click

如何定义一个方法？

在data大括号后面添加methods:{}，以后的方法都要写到methods的大括号中

methods中可以定义任意个方法

new Vue({
   el: "#app",
   data: {
   　　message: "VUE学习之旅"
   },
　　methods:{
      fun1:function(){
         alert("你点我")
      }
   }
                
});

在方法中改变#app中message的值

方法必须在el是#app的Vue对象中

this 代表vue的对象

 fun1:function(){
      this.message = "HelloWord"
 }

按键事件

按键修饰符

.enter 
.tab 
.delete (捕获 "删除" 和 "退格" 键) 
.esc 
.space 
.up 
.down 
.left 
.right 
.ctrl 
.alt 
.shift 
.meta（ndows键）

v-no:keyup当某个键按下时

event 事件源（某个键点击）

　　　注意：event和vue无关

event.keyCode 点击某个键，对应的数值

<div id="app">
    <input type="text" value="" @keyup.enter="fn1"  />
</div>

var x=new Vue({
    el:"#app",
    data:{
        
    },
    methods:{
        fn1:function(){
            alert(event.keyCode);
        }
    }
})

事件修饰符

.stop 
.prevent 
.capture
.self 
.once

在jQuery中我们取消a标签点击跳转的事件的方式是直接在href属性中加上

<a href="javascript:;" onclick="xxx"></a>

在vue中取消a标签的跳转事件是直接在点击事件后加上.prevent 修饰符

<a href="http://www.baidu.com" @click.prevent="xxx" >跳转到百度</a>

在vue中在父标签中有点击事件，并且子标签也有点击事件，当我们点击子标签时会触发事件也会触发父标签中的事件称为：事件的传播

处理方法我们需要在事件后加上.stop修饰符就可以了

<div id="app" @click="fn1"  style="border:1px solid #FF0000;height: 50px;"  >
    <a href="http://www.baidu.com" @click.prevent.stop="fn2(msg)" >跳转到百度{{msg}}</a>
</div>

var x=new Vue({
    el:"#app",
    data:{
        msg:"你好"
    },
    methods:{
        fn1:function(){
            alert("被点击了1..");
            //event.preventDefault();
        },
        fn2:function(x){
            alert("被点击了2.."+x);
            //event.stopPropagation();
        }
    }
    
})

v-text和v-html的事件绑定

在vue中定义属性msg，属性值为"我是一条消息<a href=\'http://www.baidu.com\'>点我去百度</a>"

var x=new Vue({
    el:"#app",
    data:{
        msg:"我是一条消息<a href=\'http://www.baidu.com\'>点我去百度</a>"
    }
    
})

在页面p标签中分别绑定 v-html 和 v-text

<div id="app" >
    <p >{{msg}}</p>
    <p v-html="msg"></p>
    <p v-text="msg"></p>
</div>

v-html的效果为

v-text的效果为

v-bind属性绑定

在vue给标签添加属性我们使用v-bind，例如：给属性添加title、color属性

var x=new Vue({
    el:"#app",
    data:{
        product:{pname:"小米手机红色版",color:\'green\',title:"放上来看看.啊实打实多噶好几十个..."}
    }
})

给p标签添加我们js代码中的green颜色添加标题为"放上来看看.啊实打实多噶好几十个..."

<p v-bind:title="product.title" >{{product.pname}}</p>
<p><font v-bind:color="product.color">就是这个颜色</font></p>

vue中v-bind是可以省略不写的

<p :title="product.title" >{{product.pname}}</p>
<p><font :color="product.color">就是这个颜色</font></p>

v-model数据双向绑定

在页面文本框中值发生改变时，那么vue中js代码中的属性也会跟着改变

在vue中js代码中的属性发生改变时，那么页面文本框的值也会改变

<div id="app" >
    用户名:<input type="text" v-model:value="user1.username"  /><br />
    密码:<input type="text"  v-model:value="user1.password" /><br />
    <input type="button" value="点我是不是双向绑定" @click="fn" />
</div>

new Vue({
    el:"#app",
    data:{
        user1:{username:"小明",age:18,password:123}
    },
    methods:{
        fn:function(){
            alert(this.user1.username);
            this.user1.username="哈哈哈"
        }
    }
    
})

vue中的v-for循环

当我们需要让json字符串、一个对象或者一个数据进行循环显示到页面，我们在vue中使用v-for

new Vue({
    el:"#app",
    data:{
        users:[
            {username:"小明",age:18,password:123123},
            {username:"小红",age:18,password:1231231},
            {username:"小绿",age:20,password:1231}
        ],
        names:["大郎","次郎","莲莲"],
        user:{username:"小明",age:18,password:123123}
    }
    
})

在标签中直接使用 v-for="变量名 in 数组名"

如果需要在页面显示索引，那么我们需要在设置变量名时再定义一个，但是要用小括号括起来

　　v-for="(变量名,变量名) in 数组名" 第二个变量名代表索引

注意：如果循环的时对象，那么索引就是对象中的属性名

<div id="app">
    <table border="1px" cellspacing="0px" align="center" width="70%">
        <thead>
            <th>名字</th>
            <th>年龄</th>
            <th>密码 </th>
        </thead>
        <tbody>
            <tr v-for="(user,index)  in users">
                <td>{{user.username}}--{{index}}</td>
                <td>{{user.age}}</td>
                <td>{{user.password}}</td>
            </tr>
        </tbody>
    </table>
    <p v-for="(name,index) in names">{{name}}---{{index}}</p>
    <p v-for="(prop,xyz) in user">{{prop}}--{{xyz}}</p>
</div>

v-if 和 v-show判断

功能几乎相同为true时显示，为false时隐藏

我们用开发者工具查看时，v-if 为false时相当于删除了标签，而v-show只是隐藏了

<div id="app" >
    <div v-if="flag" >{{user1.username}}</div>
    <div  v-show="flag">{{user1.username}}</div>
    <input type="button" value="点我切换" @click="fn1" />
</div>

var x=new Vue({
    el:"#app",
    data:{
        user1:{username:"小明",age:18,password:123},
        flag:true
    },
    methods:{
        fn1:function(){
            this.flag=!this.flag;
        }
    }
    
})

vue生命周期

beforeCreate         创建vue实例前
created              创建vue实例后
beforeMount          挂载到dom前
mounted              挂载到dom后
beforeUpdate         数据变化更新前
updated              数据变化更新后
beforeDestroy        vue实例销毁前
destroyed            vue实例销毁后

我们使用的只有created在挂载之前，我们需要拿到后端响应给我们的数据

new Vue({
    el:"#app",
    data:{
        msg:"初始值"
    },
    created:function(){
        //发送ajax请求
        
    }
})

上一篇：Vue3.0实现原生高度可自定义菜单下一篇：初来乍到，请教一个关于项目拆分成多个

网站建设

Js