vue初级使用

程序员文章站 2022-06-24 11:35:55

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

一、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学习起来非常简单。

　　官网：

二、vue特性

l 轻量

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

l 数据绑定

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

l 指令

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

l 插件化

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

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

l 兼容性

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

三、vued的使用：

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

 <script type="text/javascript" src="js/vue/vue.js"></script>

四、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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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">
            <!--监听input中值的改变同步到data中的message上:
                v-model:数据的绑定；
                将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。
            -->
            <h3> {{messge}}</h3>
            <input type="text" v-model="messge" />
        </div>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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/>
            <!--从字符串索引1开始获取，到索引5之前结束-->
            {{message.substring(1,5)}}<br/>
            <!--从字符串索引2开始获取，到索引6之前结束；touppercase():将小写变为大写-->
            {{message.substring(2,6).touppercase()}}<br/>
            <!--substr(index,length):从index开始截取，截取length个字符串 -->
            {{message.substr (1,3)}}<br/>
        </div>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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">
            <!--将message的值解析为html来执行-->
            <div v-html="message"></div>
        </div>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--
            v-bind指令
            作用：将html的属性和vue实例data值绑定到一起
            语法1:
            v-bind:属性名="表达式"
            语法2:
            :属性名="表达式"
            
            语法3:
            v-bind="对象"
        -->
        <div id="app">
            <iframe v-bind:src="src"></iframe><br />
            <iframe :src="src"></iframe><br />
            <!--<iframe src="http://www.baidu.com" class="myiframe"></iframe>-->
            <!--<iframe v-bind="attr"></iframe>-->
            <iframe :src="attr.src" :class="attr.class"></iframe><br />
        </div>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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">
            <!--
                v-show:
                语法：
                v-show="真假表达式"
                如果表达式为假,相当于是在这个标签上添加css样式:display:none(相当于隐藏了)
            -->
            <p v-show="isshow">我是07</p>
        </div>
        </div>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>
        <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js-->
        <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>

上一篇：基于 MYSQL 的分区分表

下一篇： IE第一天总结

vue初级使用

使用家庭跑步机的注意事项

webpack+vue-cil中proxyTable处理跨域的方法

电热毯使用频率高知六点保冬季健康

夏季老人也应防晒如何挑选使用防晒霜

AI怎么使用混合工具设计一款渐变立体文字?

使用数据流引擎进行大型矩阵操作

cdr怎么使用轮廓描摹来抠图?

Artix : Arch拥抱OpenRC 使用笔记

php使用$_POST或$_SESSION[]向js函数传参

JavaScript使用类似break机制中断forEach循环的方法

vue初级使用

使用家庭跑步机的注意事项

webpack+vue-cil中proxyTable处理跨域的方法

电热毯使用频率高 知六点保冬季健康

夏季老人也应防晒 如何挑选使用防晒霜

AI怎么使用混合工具设计一款渐变立体文字?

使用数据流引擎进行大型矩阵操作

cdr怎么使用轮廓描摹来抠图?

Artix : Arch拥抱OpenRC 使用笔记

php使用$_POST或$_SESSION[]向js函数传参

JavaScript使用类似break机制中断forEach循环的方法

电热毯使用频率高知六点保冬季健康

夏季老人也应防晒如何挑选使用防晒霜