vuejs基础玩法(基础知识,不喜勿喷!)

2018-11-08 admin

前言 Vuejs相关教程,可参阅网站,先熟悉vue.js的基本语法。本文档讲述,以CDN的方式(在页面上,引入相关的js和css文件),来实现。 本文档适用于vuejs初学者,之前给公司实习生学习准备的,很多相关知识暂不全,敬请谅解。 [color=#ff0000]1 页面结构[/color] Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。简单来说,最基本结构如下就是:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
              {{mes}}
          </div>
    </body>
    <script>
        new Vue({
            el:'#app',
            data:{
                  mes:'hello'
            }
        })
    </script>
</html>

这里边body的最外层的div,需要在下边进行实例化。当然最外层用的是id=‘app’,实例化的时候,el:’#app’。跟css类似,如果最外层用class来标识的时候,里边#换成“点”。但是为了避免重复,统一用“id”来标识。 [color=#ff0000]2 基本模块[/color]

上半边省略,直接上js代码

<script>
    new Vue({
        el:'#app',
        data:{
            初始化页面上绑定的模型,数据
        },
        filters:{
            过滤器,简单数据处理。
        },
        mounted:function(){
            页面载入时调用的方法,
        },        
        methods:{
            事件方法
        },
        watch:{
            数据监听。
        }
    })
</script>

data: 页面初始化时,定义的元素模块,也是数据的容器,每一个栏位都会用到,类似于之前的普通写法里边的name,id等,但是比那个强大。 filters:这一块是过滤器,一般是处理数据用的。 mounted:页面加载是调用的方法,这便涉及到Vuejs的生命周期,大家可以去了解。根据不同情况调用,我自己遇到过关于图表方面,家在先后顺序的问题。 watch: 用于页面模块的数据监听。数据发生改变的时候,页面展示进行切换。 methods:事件方法都写在这个里边。例如点击事件。 正常情况下,页面结构就是上边的属性,当然顺序调换也未尝不可,看个人习惯。除了data外,其他模块用不到的,可以去掉。 [color=#ff0000]3.vue.js常用的指令[/color]

[color=#ff0000]文本指令[/color] 常用的数据绑定,双大括号的形式。{{ ··· }} v-text 纯文本的方式展示出来 v-html 会解析你数据里边带的标签,以及样式,事件等等 v-model 功能最全,你把v-model放到input里边的时候,你会发现,你的input这个栏位,跟其他几个,message变成了双向绑定,你改变input里边的值,其他的值会跟着一起变动

<body>
<div id="app">
    {{message}}
    <div v-text="message"></div>
    <div v-html="message"></div>
    <input v-model="message" />
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>"
        }
    })
</script>

运行上边的结果你会发现,{{···}}和“v-text”这种方式,会把message所有的东西输出,v-html会解析message里边的html标签,而v-model会绑定,message里边的数据,当你改变input里边的数据,页面上其他的数据也会相应改动。

[color=#ff0000]v-bind指令[/color] html中的属性值,通常会用到这个指令,例如以下的class。v-bind:class=[class1,{‘class2’:A},{‘class3’:B}] 其中,class1为一直生效,class2和class3必须根据A,B对应的布尔值来展示,true的时候生效,反之不生效。 指令简写可以直接是”:class”,省去前边的v-bind.

<style>
    .class1{color:red;}
    .class2{font-size:16px;}
</style>
<body>
    <div id="app">
        <div :class="[class1,{‘class2’:A}]">
            {{message}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>",
            class1:'class1',
            A: true
        }
    })
</script>

(这种情况,可用于,按钮点击,更换状态,样式等) [color=#ff0000]v-if(v-else-if,v-else)指令[/color] 主要是在页面上给出相应的条件,例如

<style>
    p{font-size:30px;}
</style>
<body>
    <div id="app">
        <input v-model="message">
        <p v-if="message<12" style="color:red;"></p>
        <p v-else-if="message>20" style="color:green;"></p>
        <p v-else style="color:yellow;"></p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>",
            A: true
        }
    })
</script>

跟普通的if…else…语句的写法基本类似,也可以进行嵌套。 v-for指令,数据循环,基本写法

<body>
    <div id="app">
        <div v-for="item in message">
            {{item.name}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {name:"张三"},
                {name:"李四"}
            ]
        }
    })
</script>

也可以加嵌套,二维数组使用,限定结构一致

<body>
    <div id="app">
        <div v-for="item in message">
            {{item.name}}
            {{item.age}}
            <div v-for="it in item.study">
                {{it.yuwen}}
                {{it.shuxue}}
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {
                name:"张三",
                age:"24",
                study:[
                    {
                        yuwen:"95",
                        shuxue:"80"
                    }
                ]
                },
            ]
        }
    })
</script>

vuejs,2.0中,v-for循环也可以加键名和索引,例如:

<body>
    <div id="app">
        <div v-for="(item,key,index) in message">
            {{index}}{{key}}{{item.name}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {name:"张三"},
                {name:"李四"}
            ]
        }
    })
</script>

value为对应字段行。key为键名,index为索引。这三个只是顺序,不带表真实参数,你写ABC下边双括号也写ABC也可以 。 循环的时候,我们可以写在v-model,或者有图片的时候,我们可以写在:src上 例如:<input v-model=“item.name”> <img :src=“item.name”> 标签中不允许带双括号。例如,以下这种写法 <img :src="{{item.name}}"> [color=#ff0000]4.vue.js常用事件[/color]

[color=#ff0000]点击事件[/color] 常用事件声明为v-on:click=”hello()”,无参数,可以不带括号,有参数写括号中。简写方式@click=”hello()”,事件写在methods:{ ~~~ }里边。格式如下

<body>
    <div id="app">
        <input type="button" @click="demo()">
        <input type="button" @change="hello('aaa')">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        methods:{
            demo:function(){
            },
            hello:function(a){
            }
        }
    })
</script>

事件是可以继承的,简单来说,比如一个事件,我们需要在页面上调用多次,我们可以直接进行事件继承。

<body>
    <div id="app">
        <input type="button" @click="demo()">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        mounted:function(){
            this.hello();
            页面载入时调用hello方法,
        },
        methods:{
            demo:function(){
                this.hello();
                点击时调用到了hello方法
            },
            hello:function(a){
        }
    }
})

</script>


[color=#ff0000]监听事件[/color]
监听事件,当栏位值发生改变的时候,使用。,原来的js采用的是change事件,vuejs也可以用@change=””的方式来写,这样的话写在,跟点击事件一样,写在methods:{ ~~~ }里边。

但是部分框架,@change这种方式不兼容,所以我们一般直接用v-model进行绑定,写在watch:{ }里边,例如:

<body>

<div id="app">
    <input type="text" v-model="message">
</div>

</body> <script>

new Vue({
    el:'#app',
    data:{
        message:'20'
    },
    watch:{
        message:function(val,oldval){
            自带两个参数,其中val为当前值,oldval为改变后的值
        }
    },
    methods:{
    }
})

</script>


[color=#ff0000]过滤器[/color]
过滤器写在filters:{}里边,一般对数据进行处理的时候会用得到。直接在文本后边加上“|”,然后跟这写,事件名。例如

<body>

<div id="app">
    {{message | demo}}
</div>

</body> <script>

new Vue({
    el:'#app',
    data:{
        message:'20'
    },
    filters:{
        demo:function(val){
            return "$"+val+".00";
        }
    }
})

</script>

原文链接:https://segmentfault.com/a/1190000016948381

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44895.html

文章标题:vuejs基础玩法(基础知识,不喜勿喷!)

相关文章
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
线程有什么用处? 为什么有些东西注定不会流行
多线程的领域也许只有一个: 图形学. 我们以一个游戏来说明 @ |___|___|___|___|___ @是一个玩家, 往前走, 每一个___是1米. 每当@走到1米的时候, 会绘制一个蘑菇*给玩家看. @|___*___|___|___...
2015-11-12
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
HTML5:未来不可阻挡的力量
HTML5像是互联网行业扔下的一颗炸弹,有些人还未反应过来,原先专注的领域也许就将面临彻底的革新。比如像前几年疯狂甚至有点野蛮成长的App。虽然HTML5从出现到去年标准尘埃落定,一直在争议中曲折发展,但是各种H5页面的推广以及H5小游戏在...
2015-11-12
回到顶部