Vue JS 学习

最新推荐文章于 2024-06-12 15:39:02 发布

troysps

最新推荐文章于 2024-06-12 15:39:02 发布

阅读量1.4k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/troysps/article/details/80373392

版权

Vue js 学习

Vue js 简介

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。

Vue.js使用文档及下载Vue.js

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

Vue js 基本概念

开发版本vue.js，上线版本vue.min.js

Vue实例

每个 Vue 应用都是通过实例化一个新的 Vue对象开始的：
其中，el属性对应一个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使用vue对象中定义的属性和方法。

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app">{{msg}}</div>
    <script>

            // 一个应用是从一个vue对象开始的
            // 创建一个vue对象
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"hello world!",
                }
            })
        </script>
</body>
</html>

Vue js 模板语法

模板语法指的是如何将数据放入html中，Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层 Vue 实例的数据。所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

插入值 双大括号{{message}}

指令  本质上是将js封装好使用
        v-bind 链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
    <p>{{sTr}}</p>
    <p>{{iNum + 15}}</p>
    <P>{{bIsok? 'AMD YES' : 'NO'}}</P>
    <P>{{sTr.split('').reverse().join('')}}</P><br>
    <!-- 指令带有v-的前缀属性 本质上是js操作分装  -->

    <!-- <a v-bind:href="sUrl">百度的链接</a>
    <input type="button" v-on:click="fnReverse" name="" id="" value="数据反转"> -->
    <!-- 指令简写 -->
    <a :href="sUrl">百度的链接</a>
    <input type="button" :click="fnReverse" name="" id="" value="数据反转">

    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                sTr:"hello world",
                iNum:10,
                bIsok:true,
                sUrl:'http://www.baidu.com'
            },
            methods:{
                fnReverse:function(){
                    this.sTr = this.sTr.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

Class与style绑定

Class绑定
可以给v-bind:class传一个对象，以动态的切换class

style绑定
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 来命名

一般多使用class绑定切换class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .big{
            font-size: 100px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 类的绑定 -->
        <p :class="{big:isBig,red:isRed}">这是第一个段落</p>
        <p :class="[isBig?'big':'', 'red']">这是第二个段落</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                isBig:true,
                isRed:true,
            }
        })
    </script>
</body>
</html>

条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：
v-if v-else-if v-else 控制元素的创建或者销毁
v-show 控制元素的隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1 v-if='bIsok'>这是使用v-if的标签h1</h1>
        <h2 v-else>这是使用v-else的h2</h2>
        <h3 v-show='bIsok'>这是使用v-show的h3</h3>


        <div v-if="sCode=='A'">A</div>
        <div v-else-if="sCode=='B'">B</div>
        <div v-else-if="sCode=='C'">C</div>
        <div v-else>not A/B/C</div>


    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                bIsok:true,
                sCode:'A'
            }
        })
    </script>
</body>
</html>

事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。
事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{iNum}}</p>
        <input type="button" name="" id="" value="递增" @click="iNum+=1">
        <input type="button" value="弹框显示iNum02的值" @click="fnShow">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                iNum:10,
                iNum02:15
            },
            methods:{
                fnShow:function(){
                    alert("iNum02的值是:"+this.iNum02);
                }
            }
        })
    </script>
</body>
</html>

实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在vue.js可以加上事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

实例: 弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Document</title>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app" @click="bIsshow=false">
        <input type="button" value="弹出弹框" id="btn01" @click.stop="bIsshow=true">
        <div class="pop_main" id="pop" v-show="bIsshow">
            <div class="pop_con" @click.stop>
                <div class="pop_title">
                    <h3>系统提示</h3>
                    <a href="#" id="shutoff" @click="bIsshow=false">×</a>
                </div>
                <div class="pop_detail">
                    <p class="pop_text">亲！请关注近期的优惠活动！</p>
                </div>
                <div class="pop_footer">

                </div>
            </div>
            <div class="mask"></div>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                bIsshow:false,
            }
        })

    </script>
</body>
</html>

小练习: 选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con{
            width:500px;
            height:350px;
            margin:50px auto 0;
        }
        .tab_btns{
            height:50px;
        }
        .tab_btns input{
            width:100px;
            height:50px;
            background:#ddd;
            border:0px;
            outline:none;
        }

        .tab_btns .activve{
            background:gold;
        }

        .tab_cons{
            height:300px;
            background:gold;
        }

        .tab_cons div{
            height:300px;
            line-height:300px;
            text-align:center;
            display:none;
            font-size:30px;
        }

        .tab_cons .current{
            display:block;
        }
    </style>
    <script src="js/vue.js"></script>
    <script>

    </script>
</head>

<body>
    <div class="tab_con" id="app">
        <div class="tab_btns">
            <input type="button" value="按钮一" :class="[(iNow==0)?'active':'']" @click="iNow=0">
            <input type="button" value="按钮二" :class="[(iNow==1)?'active':'']" @click="iNow=1">
            <input type="button" value="按钮三" :class="[(iNow==2)?'active':'']" @click="iNow=2">
        </div>
        <div class="tab_cons">
            <div :class="[(iNow==0)?'current':'']">按钮一对应的内容</div>
            <div :class="[(iNow==1)?'current':'']">按钮二对应的内容</div>
            <div :class="[(iNow==2)?'current':'']">按钮三对应的内容</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                iNow:0
            }
        })
        </script>
</body>
</html>

列表渲染

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 将数组的数据放到页面 带索引值 -->
        <ul>
            <li v-for="item in aList">{{ item }}</li>
        </ul>
        <!-- 带索引值 -->
        <ul>
            <li v-for="(item,index) in aList">{{index+1}},{{ item }}</li>
        </ul>
        <!-- 将对象的数据放到页面 -->
        <ul>
            <li v-for="item in oPerson">{{ item }}</li>
        </ul>
        <!-- 将对象的数据放到页面 带建名 -->
        <ul>
            <li v-for="(item,key) in oPerson">{{key}},{{ item }}</li>
        </ul>

    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                aList:['红海', '妇联3', '战狼2', '捉妖记2'],
                oPerson:{"name":"李思", "age":18, "gender":"女"}
            }
        })
    </script>
</body>
</html>

表单绑定输入输出 – 数据的双向绑定

可以用 v-model 指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

单行文本框

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本框

<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框，绑定到同一个数组：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

......

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

单选框

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

......
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

下拉框

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
......

new Vue({
  el: '...',
  data: {
    selected:''
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">

        <form action="">
            <!-- 单行文本输入 -->
            <p>
                <label for="">用户名:</label>{{username}}<br>
                <input type="text" v-model="username"><br>
                <input type="button" value="改变值" @click="fnChange">

            </p>
        </form>
        <p>
            <label for="">性别:</label>{{xingbie}}<br>
            <input type="radio" value="0" name="gender" v-model="xingbie">男
            <input type="radio" value="1" name="gender" v-model="xingbie">女
        </p>

        <p>
            <!-- 多行文本输入 -->
            <label for="">个人信息:</label>{{info}}<br>
            <textarea v-model="info" name="" id="" cols="30" rows="10"></textarea>
        </p>

        <p>
            <label for="">爱好:</label>{{}}<br>
            <input type="checkbox" v-model="aihao" value="study" name="hobby" >学习
            <input type="checkbox" v-model="aihao"  value="practise" name="hobby">练习
            <input type="checkbox" v-model="aihao" value="basketball" name="hobby">打球
            </p> 


        <p>
            <label for="">{{site}}<br></label>
                <select v-model="site" name="" id="">
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>



                </select>

         </p>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                username:"",
                info:'',
                xingbie:0,
                aihao:[],
                site:3,
            },
            methods:{
                fnChange:function(){
                    this.username += 'haha!'
                }
            }
        })
    </script>
</body>
</html>

计算属性和侦听属性

计算属性和侦听属性方法定义在侦听之前
computed 计算属性
watch 侦听属性

计算属性
模板内一般只能进行简单的运算使用计算属性可以使用较为复杂的运算

侦听属性
伴随某一属性的变化而进行相应的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}<br></p>
        <p>{{message.split("").reverse().join('')}}</p>
        <!-- 上面的写法建议写成下面计算属性的形式 -->
        <p>{{reversemsg}}</p>
        <input type="button" value="改变属性" @click="fnXXX" name="" id="">

    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                message:"hello"
            },
            methods:{
                fnXXX:function(){
                    this.message += 'haha';
                }
            },
            // 计算属性
            computed:{
                reversemsg:function(){
                    return this.message.split("").reverse().join('')
                }
            },
            watch:{ // 定义侦听属性
                message:function(newVal, oldVal){
                    console.log(newVal + ' | ' + 'oldVal');

            },
            }
        })  
    </script>
</body>
</html>

过滤器

过滤器实质上是一个函数可以在一个组件的选项中定义组件内部过滤器
vue.js 允许你自定义过滤器
{{ prize | RMB }}
可以在一个组件的选项中定义组件内部过滤器

定义全局过滤器
将过滤器绑定到类上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 过滤器 可以用于双花括号 -->
        <p>商品的价格是: {{price | RMB | Yuan}}</p>
    </div>

    <div id="app2">
            <!-- 过滤器 可以用于双花括号 -->
            <p>商品的价格是: {{price | $ | Yuan}}</p>
        </div>


</body>
<script>
    // 定义全局过滤器 绑定到Vue类上
    Vue.filter('Yuan', function (value) { 
        if(value==''){
            return;
        }
        return value + ' 元'
     })


    var vm = new Vue({
        el:"#app",
        data:{
            price:99.99,
        },
        // 局部过滤器
        filters:{
            RMB:function(value){
                if(value==''){
                    return;
                }
                return '￥ ' + value;
            }
        }
    })
    var vm2 = new Vue({
        el:"#app2",
        data:{
            price:88.88
        },
        filters:{
            $:function(value){
                if(value==0){
                    return;
                }
                return '$ ' + value;
            }
        }
    })


</script>
</html>

实例的生命周期

实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新 DOM 等。同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能。
beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始
beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted

实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。
beforeUpdate

数据发生变化前调用
updated

数据发生变化后调用

一般来说使用vuejs 操作数据是在生命周期的mounted使用
这里写图片描述

es6

变量声明let和const

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        alert(iNum01); // 弹出undefined 这个叫做变量预解析
        var iNum01 = 12;

        alert(iNum02);
        // es6 新增定义变量的关键字
        // let 定义的变量没有变量的预解析
        let iNum02 = 199;

        // const 也没有变量预解析
        alert(iNum03);
        const iNum03 = 36;

        iNum02 = 25;

        // const 定义的是一个常量 不可修改
        iNum03 = 37;
    </script>
</head>
<body>

</body>
</html>

箭头函数

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function fnRs(a,b) { 
            var rs = a + b;
            alert(rs);
         };

        fnRs('cc', 'dd')

        //  上面定义函数的方式可以改写成赋值定义的方式
        var fnRs = function (a, b) { 
            var rs = a + b;
            alert(rs);
         },

        // 改成箭头函数的形式
        var fnRs =  (a, b)=> { 
            var rs = a + b;
            alert(rs);
         },

        var fnRs =  a => { 
            alert(a);
         },





    </script>
</head>
<body>

</body>
</html>

数据交互

vue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

axios完整写法：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios请求的写法也写成get方式后post方式。
执行get请求

// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

// 可选地，上面的请求可以这样做

axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

执行post请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

troysps

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue JS 学习

Vue js 学习Vue js 简介Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。Vue的核心库只关注视图层...
复制链接

扫一扫