vue初级使用

亦凉 2021-12-03 05:07 377阅读 0赞

**一、Vue是什么?**

Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html

Vue只关注视图层。

Vue通过新的属性（自定义）和\{ \{表达式\}\}扩展了 HTML。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue学习起来非常简单。

官网：[https://cn.vuejs.org/][https_cn.vuejs.org]

**二、Vue特性**

l  **轻量**

Vue.js库的体积非常小的，并且不依赖其他基础库。

l  **数据绑定**

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

l  **指令**

内置指令统一为(v-\*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

l  **插件化**

Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

l  **[组件化][Link 1]**

[　　组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用][Link 1]

l  **兼容性**

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有[兼容 ECMAScript 5 的浏览器][ECMAScript 5]。

**三、Vued的使用：**

它有两个版本：开发版本和生产版本（由于代码太多，具体的vue.js文件需要到vue官网复制）。

**四、Vue实例讲解**

**　　1****、****vue****实例挂在（****el****）的标签**

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。  实例上的属性和方法只能够在当前实例挂载的标签中使用

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <h3> {
        {messge}}</h3>
                姓名：{
         {user.name}}；年龄：{
         {user.age}}；性别：{
         {user.sex}}
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        messge:"变形金刚",
                        user:{
                            name:"张三",
                            age:18,
                            sex:"男"
                        }
                    }
                });
                // 通过Vue实例可以直接修改data对象中的数据
                app.messge="修改后的变形金刚";
                app.user.name="王小二";
            </script>
        </body>
    </html>

**　　2****、****Vue****中的数据****(data)**

1 、Vue实例的数据保存在配置属性data中, data自身也是一个对象.

2、通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <h3> {
        {messge}}</h3>
            </div>
            <div class="cla">
                <h3> {
        {messge}}</h3>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        messge:"变形金刚"
                    }
                });
                
                var ha= new Vue({
                    el:".cla",
                    data:{
                        messge:"搬砖的程序员"
                    }
                });
            </script>
        </body>
    </html>

**　　3****、****Vue****中的方法****(methods)**

1、Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体

2、方法都是被Vue对象调用,所以方法中的this代表Vue对象

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <h3> {
        {messge}}</h3>
                {
         {haa()}}
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        messge:"变形金刚",
                        user:{
                            name:"张三",
                            age:18,
                            explain:"过来啊！"
                        }
                    },
                    methods:{
                        //方法写法一：
                        haa:function(){
                            return this.user.name+this.user.explain+"我请你吃糖果";
                        },
                        //方法写法二：
                        yaa(){
                            //跳出一个弹窗
                            alert(this.messge+"是钢铁直男");
                        }
                    }
                });
                app.yaa();
            </script>
        </body>
    </html>

**　　4****、****vue****数据双向绑定**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                
                <h3> {
        {messge}}</h3>
                <input type="text" v-model="messge" />
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        messge:"变形金刚",
                    }
                });
                
            </script>
        </body>
    </html>

**五、Vue架构的认识：**

Vue是一款开源的JavaScript MV\*（MVVM、MVC）框架。

Vue引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

**MVC模式：**

**Model：** 数据模型，一些JavaScript 对象，比如 \{name : "小小强",age : 16\};

**View:**   视图，网页中的内容，一般由HTML模板生成。

**Controller :** 控制器（路由），视图和模型之间的胶水。

**MV VM模式：**

**Model：**它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

**View：**它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

**ViewModel：**它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；

对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

**六、VueJS表达式**

**　　语法：**

VueJS表达式写在双大括号内：\{ \{ expression \}\}。

VueJS表达式把**数据绑定**到 HTML。

VueJS将在表达式书写的位置"输出"数据。

VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 \{ \{ 5 + 5 \}\} 或 \{ \{ firstName + " " + lastName \}\}

**　　案例：**

**　　1****、简单表达式**

在\{ \{ \}\}中可以进行简单的运算

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            
            <div id="app">
                 
            <h1>{
        {5+5}}</h1>
            
            <h1>{
        {5+"v5"}}</h1>
            <h1>{
        {5+"5"}}</h1>
            
            <h1>{
        {"5"-"5"}}</h1>
            <h1>{
        {5*5}}</h1>
            
            <h1>{
        {"5"*"5"}}</h1>
            
            <h1>{
        {5/5}}</h1>
            <h1>{
        {5/5}}</h1>
    
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app"
                });
                
            </script>
        </body>
    </html>

**　　2****、三目表达式**

在\{ \{\}\}中的表达式可以使用三元运算符,但是不能够使用其他语句

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                
                {
         { show?"真":"假"}}
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        show:true,
                    }
                });
                
            </script>
        </body>
    </html>

**　　3****、字符串表达式**

1、直接使用字符串字面值作为字符串对象  
    　2、使用data中的字符串对象

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                {
         {"这是字面值"}}<br/>
                {
         {"这是字面值".length}}<br/>
                {
         {message.length}}<br/>
                
                {
         {message.substring(1,5)}}<br/>
                
                {
         {message.substring(2,6).toUpperCase()}}<br/>
                
                {
         {message.substr (1,3)}}<br/>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        message:"我在data里面"
                    }
                });
            </script>
        </body>
    </html>

**　　4****、对象表达式**

**        ** 在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                {
         {messge}}<br/>
                {
         {JSON.stringify(messge)}}<br/>
                {
         {messge.toString()}}<br/>
                {
         {messge.name}}<br/>
                {
         {messge.age}}<br/>
                {
         {messge.getAge()}}<br/>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var user ={
                    name:"张三",
                    age:19,
                    getAge:function(){
                        return this.age;
                    },
                    toString:function(){
                        return "姓名:"+this.name+",年龄:"+this.age;
                    }
                }
                var app=new Vue({
                    el:"#app",
                    data:{
                        messge:user
                    }
                });
                
            </script>
        </body>
    </html>

**　　5****、数组表达式**

在表达式中可以使用JavaScript数组中的任何语法来操作数组.

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                {
         {hobbys}}<br/>
                {
         {hobbys[0]}}<br/>
                {
         {hobbys.length}}<br/>
                {
         {hobbys.toString()}}<br/>
                
                {
         {hobbys.join("------")}}<br/>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                         hobbys:["打游戏","踢足球",'看电视',"游泳"]
                    }
                });
            </script>
        </body>
    </html>

**七、Vue指令**

**　　1****、什么是指令**

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

**　　2****、常见的指令**

v-text=“表达式”  设置标签中的文本  
　　v-html=“表达式”  设置标签中的html  
　　v-if=“表达式”    判断条件     
　　v-for=“表达式”   循环  
　　v-model=“表达式” 数据双向绑定  
　　v-on=“表达式”    注册事件

**　　3****、指令的作用**

1、作用:  当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

2、一个标签元素上可以出现多个指令属性

3、指令只能够出现在Vue对象所挂载的标签范围内的标签中

**　　4****、****v-text****指令**

**　　注意事项:**  
   　1、如果值是html的值,也不会作为普通的文本使用.  
        2、标签中的属性值必须是data中的一个属性.

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <span v-text="message"></span><br/>
                <span v-text="user.username"></span><br/>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        message: "<h1>这是一个Span!</h1>",
                        user: {
                            username: "李李"
                        },
                    }
                });
            </script>
        </body>
    </html>

**　　5****、****v-html****指令**

注意事项:
          1、{
        {表达式}} 可以插入的标签的内容中
         2、v-text和v-html更改标签中的所有内容

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                
                <div v-html="message"></div>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        message: "<h1>这是一个Html!</h1>",
                    }
                });
            </script>
        </body>
    </html>

**　　6****、****v-for****指令**

**      ** **数组：**

**      ** 1、v-for="元素 in 数组"（v-for="ele in arr"）

2、v-for="(元素,索引) in 数组"（v-for="(ele,index) in arr"）

**   ** **对象：**

**      ** 1、v-for="值in 对象"（v-for="value in obj"）

2、v-for="(值,键) in 对象"（v-for="(value,key) in obj"）

3、v-for=(值,键,索引) in 对象（v-for=(value,key,index) in obj）

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                 <h1>循环数组</h1>
                <ul>
                    <li v-for="hobby in hobbys">{
        {hobby}}</li>
                </ul>
                 <h1>遍历对象</h1>
                <ul>
                    <li v-for="value in student">{
        {value}}</li>
                </ul>
            
                <h1>带索引循环数组</h1>
                <ul>
                    <li v-for="(hobby,index) in hobbys">{
        {index}}--{
        {hobby}}</li>
                </ul>
                <h1>带键遍历对象</h1>
                <ul>
                    <li v-for="(value,key,index) in student">{
        {index+1}}---{
        {key}}--{
        {value}}</li>
                </ul>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        hobbys : ["爬山","游泳","打豆豆","睡觉"],
                        student : {
                            name: "小毛",
                            age: 2,
                            sex: "男",
                        },
                        num : 10,
                        str : "itsource",
                    }
                });
                
            </script>
        </body>
    </html>

**　　7****、****v-bind****指令**

**      ** 1、v-bind:属性名="表达式"（v-bind:src=”路径”简写：src=”路径”）

2、v-bind=”对象”

**注意：**  
        将一个对象 键 和 值 作为标签的属性的名字和值时,在v-bind后不需要指定属性的名字

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            
            <div id="app">
                <iframe v-bind:src="src"></iframe><br />
                <iframe :src="src"></iframe><br />
                
                
                <iframe :src="attr.src" :class="attr.class"></iframe><br />
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        src:"http://www.baidu.com",
                        attr:{
                            src:"http://www.baidu.com",
                            class:"myIframe"
                        }
                    }
                });
                
            </script>
        </body>
    </html>

**　　8****、****v-model****指令**

**      ** 1、v-model只作用于以下表单:  
        input、  select、 textarea

**　　注意：**在input标签中，当v-model和value属性都存在的时候，在前台页面上展示的是v-model的值，但value的值却没有改变，提交表单时提交的还是value值。

复选框v-mode表达式的值为一个数组。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <input v-model="message" value="这是value值" /><br />
                爱好:
                <input type="checkbox" v-model="hobby" value="1"/>唱
                <input type="checkbox" v-model="hobby" value="2"/>跳
                <input type="checkbox" v-model="hobby" value="3"/>rap
                性别
                <input type="radio" v-model="sex" value="1"/>man
                <input type="radio" v-model="sex" value="2"/>woman
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        message:"dbl",
                        hobby:[1,2],
                        sex:2
                    }
                });
            </script>
        </body>
    </html>

**　　9****、****v-show****指令**

<**标签名** **v-show=****"****真假表达式"**></**标签名**>

如果v-show="真",标签中添加display:none样式

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                
                <p v-show="isShow">我是07</p>
            </div>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        isShow:true
                    }
            });
            </script>
        </body>
    </html>

**　　10****、****v-if****指令**

<**标签名** **v-if=****"****表达式">**</**标签名**>  
　　<**标签名** **v-else-if=****"****表达式"**></**标签名**>  
　　<**标签名** **v-else-if=****"****表达式"**></**标签名**>  
　　<**标签名** **v-else**></**标签名**>

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <p v-if="money<10">中午不吃饭</p>
                <p v-else-if="money>=10&&money<20">吃牛肉面</p>
                <p v-else>吃拉面</p>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        money:15
                    }
                });
                
            </script>
        </body>
    </html>

**八、事件**

v-on:事件名称="表达式或者vue函数的调用"(例如：v-on:click="方法名()")

简写：@事件名称

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <button @click="clickMe(1)">点我试试</button>
                <button @click="clickMe(2)">点我试试</button>
            </div>
            
            <script type="text/javascript" src="js/vue.js" ></script>
            <script type="text/javascript">
                var app=new Vue({
                    el:"#app",
                    data:{
                        money:15
                    },
                    methods:{
                        clickMe(num){
                            alert(num)
                        }
                    }
                });
            </script>
        </body>
    </html>

**九、综合练习**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>vue综合练习</title>
            <style type="text/css">
                td{
         
                    align-content: center;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <h3>购物车</h3>
                <h4 v-if="products.length==0">空空如也</h4>
                <div v-else>
                    <table border="1" cellspacing="0" align="center">
                        <tr>
                            <th>编号</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(product,index) in products">
                            <td>{
        {index+1}}</td>
                            <td>{
        {product.name}}</td>
                            <td>{
        {product.price}}</td>
                            <td><button @click="reduce(index)">-</button>{
        {product.num}}<button @click="add(index)">+</button></td>
                            <td><button @click="del(index)">删除</button></td>
                        </tr
                        <tr>
                            <td colspan="5">总价：{
        {total}}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <script type="text/javascript" src="js/vue.js" ></script>
            <script>
                var app = new Vue({
                    el: "#app",
                    data: {
                        products:[
                            {id:1,name:"西瓜",price:20.00,num:4},
                            {id:2,name:"牛奶",price:30.00,num:2},
                            {id:3,name:"榴莲",price:80.00,num:1}
                        ],
                        total:0
                    },
                    methods:{
                        //新版本写法：del(){}
                        //删除商品
                        del:function(index){
                            this.count();
                            this.products.splice(index,1);
                        },
                        //商品数量增加
                        add:function(index){
                            this.count();
                            this.products[index].num++;
                        },
                        //商品数量减少
                        reduce:function(index){
                            this.count();
                            //购物车中一种商品的数量至少为1个
                            if(this.products[index].num>1) {
                                this.products[index].num--;
                            }
                        },
                        //计算商品总价格
                        count:function(){
                            this.total=0;
                            for(var i in this.products){
                                this.total+=this.products[i].price*this.products[i].num;
                            }
                        }
                    },
                    //最后运行
                    mounted(){
                        this.count();
                    }
                });
    
            </script>
        </body>
    </html>

转载于:https://www.cnblogs.com/wanghj-15/p/11167515.html

[https_cn.vuejs.org]: https://cn.vuejs.org/
[Link 1]: https://cn.vuejs.org/v2/guide/#%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BA%94%E7%94%A8%E6%9E%84%E5%BB%BA
[ECMAScript 5]: https://caniuse.com/#feat=es5