当前位置：移动技术网 > IT编程>开发语言>JavaScript > Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

2019年03月15日 | 移动技术网IT编程 | 我要评论

163邮箱免费注册,公开审判讨薪民工,刺陵剧照

自学vue框架，每天记录重要的知识点，与大家分享!有不足之处，希望大家指正。

本篇将讲述：vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

前期学习基础，使用vue.js包开发，后期实践时使用vue-cli脚手架，

可以到官网出进行下载。https://vuejs.org/js/vue.min.js，将里面代码复制，自己建一个js文件，保存下来

vue是基于mvvm框架，上图

废话不多说直接上代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h3>vue 第一个示例</h3>
        <div id="app">
            <!-- 3.这里是view -->
            {{message}}
        </div>
        <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //1.创建 model(数据)
            var exampledata = {
                message:"hello vue"
            };
            //2.创建vue的实例(viewmodel)
            new vue({
                el:"#app",            //挂载点  el:vue对象挂载到app元素上
                data:exampledata    //数据:exampledata
            });
        </script>
    </body>
</html>

解析：(此处说法不严谨，纯属于我的白话，便于理解)

　　首先创建model数据，其次创建vue的实例(viewmodel)，其中el，是将vue对象挂载到相对应的app元素上，称之为挂载点，data数据绑定

在vue视图(view)部分显示数据的话,使用{{message}}，能将数据显示在浏览器中。(后期熟悉的基础上，可以将model数据部分直接写在vue对象中，后面给大家讲解)

实例02：vue的数据的双向绑定01

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据的双向绑定</title>
    </head>
    <body>
        <div id="app">
            {{message}}
            <hr>
            <!-- v-model 将input中的value与vue对象message绑定在一起 -->
            <input type="text" v-model="message" />
        </div>
        
        <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var messagedata={
                message:"hello vue"
            }
            
            new vue({
                el:"#app",
                data:messagedata
            });
        </script>
    </body>
</html>

解释：

　　<input type="text" v-model="message" /> v-model是一条指令元素，用于数据的绑定，将input中的value绑定在一起

　　此处的数据是实时的，也就是说当input的值发生改变时，上面{{message}}的也将发生变化，在介绍到指令的时候，会有一个懒惰指令也就是说，

直到输入框输入完成之后，数据才会发生变化。

实例02：vue的数据的双向绑定02

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 显示数据 -->
            <h4>{{message}}</h4>
            <!-- 在花括号中  执行运算 -->
            <h4>{{3+5}}</h4>
            <!-- 获取数据对象中的属性值 -->
            <h4>{{car.brand}}</h4>
            <!-- 三目运算 -->
            <h4>{{count>totalnum?"success":"error"}}</h4>
            <!-- 布尔值 -->
            <h4>{{hasmore}}:{{!hasmore}}</h4>
            <!-- 数据内容按照字符床格式输出 -->
            <h4>{{htmllist}}</h4>
        </div>
        <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var exampledata={
                message:"hello vue",
                htmllist:"<h6>hello vue</h6>",
                count:3,
                totalnum:10,
                hasmore:true,
                car:{
                    brand:"volvo",
                    price:30
                }
            }
            
            new vue({
                el:"#app",
                data:exampledata
            })
        </script>
    </body>
</html>

注意：

　　上面代码已经详细解释了有关用法

　　此处强调的是，<h4>{{htmllist}}</h4>，此代码会将数据按照字符串形式输出，如果想让它按照h6的样式输出，需要在<h4>标签中添加v-html="htmllist"指令

vue指令

定义：以v-开头特性的属性，他们作用于html元素，指令提供一些特性，指定绑定元素产生不同的行为

指令的分类：

v-if:指定条件渲染，他根据表达式的true/false来删除或添加元素

　　- 语法：v-if="expression"

　　- expression是返回bool值，表达式true/false

　　- 删除的意义：就是将内容转换成了注释

上代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {{message}}
            <h3 v-if="yes">{{yes}}</h3>
            <h3 v-if="no">{{no}}</h3>
            <h3 v-if="age > 10">age:{{age}}</h3>
            <h3 v-if="name.indexof('w')>=0">name:{{name}}</h3>
        </div>
        <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var exampledata={
                message:"hello vue",
                yes:true,
                no:false,
                age:18,
                name:"wzp"
            }
            new vue({
                el:"#app",
                data:exampledata
            })
        </script>
    </body>
</html>

解析：

　　代码部分已经详细讲解了相关用法，不清楚的，给我留言即可

v-show：条件渲染的指令，和v-if指令不同，使用v-show指令元素始终会渲染到html中

　　- 显示与隐藏

　　- 他只设置style属性 display:block(true)/none(false)

上代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h3>v-show</h3>
            <h4 v-show="yes">yes</h4>
            <h4 v-show="no">no</h4>
            <h4 v-show="age > 25">age:{{age}}</h4>
            <h4 v-show="name.indexof('i')>=0">name:{{name}}</h4>
        </div>
        <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var exmapledata={
                message:"hello",
                yes:true,
                no:false,
                age:28,
                name:"lion"
            }
            new vue({
                el:"#app",
                data:exmapledata
            })
        </script>
    </body>
</html>

注意：

　　v-if于v-else是可以一起使用的，相当于 if(){}else{}. 也就是说v-if后可跟v-else.
　　一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
　　v-show，只是根据条件显示。后面没有v-else 　　

　　好多教程里面都写着v-show后面可以跟v-else，是一条误导信息。

v-else:必须跟一个v-if,否则不能够被识别

　　不存在v-show后面跟v-else(原因上面已经详述)

上代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h4 v-if="age > 20">age:{{age}}</h4>
            <h4 v-else>name:{{name}}</h4>
            <hr>
            <h4 v-if="age > 30">age:{{age}}</h4>
            <h4 v-else>name:{{name}}</h4>
            <hr>
            
            
        </div>
        <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var exmapledata={
                sex:"male",
                age:28,
                name:"lion"
            }
            new vue({
                el:"#app",
                data:exmapledata
            })
        </script>
    </body>
</html>

下一篇将介绍v-bind,v-on,v-model,自定义指令的创建

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

JS array数组检测方式解析

typeofvar arr = [1,2,3];console.log(typeof arr);//'object'数组的本质是一种特殊的对象，所以返回'obj... [阅读全文]
JS实现图片幻灯片效果代码实例

其效果是点击图片切换到下一张图片首先准备五张图片 <ul class="imge"> <li><img src="images/1... [阅读全文]
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

大部分情况下object.getownpropertynames()与object.keys(obj)的功能是一样的，我们一般也是用来获取一个json对象中所有... [阅读全文]
js cavans实现静态滚动弹幕

本文实例为大家分享了js实现静态滚动弹幕的具体代码，供大家参考，具体内容如下<!doctype html><html lang="en">... [阅读全文]
JavaScript使用prototype属性实现继承操作示例

本文实例讲述了javascript使用prototype属性实现继承操作。分享给大家供大家参考，具体如下：js并没有显式的继承语法,在js中所有的对象都是obj... [阅读全文]
JavaScript直接调用函数与call调用的区别实例分析

本文实例讲述了javascript直接调用函数与call调用的区别。分享给大家供大家参考，具体如下：直接调用直接调用函数是最常见最普通的方式,直接以函数附加的... [阅读全文]
JS变量提升原理与用法实例浅析

本文实例讲述了js变量提升。分享给大家供大家参考，具体如下：该篇介绍什么是变量提升,写给像我一样的js新手看的简单来说变量提升就是 js会把var变量的声明自动... [阅读全文]
小程序分享链接onShareAppMessage的具体用法

onshareappmessage用法：只需要在button标签中加入open-type="share"，小程序ui就会自动识别分享链接功能<button... [阅读全文]
AutoJs实现刷宝短视频的思路详解

auto.js 是个基于 javascript 语言运行在android平台上的脚本框架。auto.js主要工作原理是基于辅助服务accessibilityse... [阅读全文]
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

本文实例讲述了javascript设计模式--简单工厂模式。分享给大家供大家参考，具体如下：第一步，ajax操作接口（目的是起一个接口检测作用）（1）引入接口文... [阅读全文]

网友评论


验证码：

Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

2019年03月15日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论