vuejs基础玩法

最新推荐文章于 2022-01-13 01:21:58 发布
最新推荐文章于 2022-01-13 01:21:58 发布
阅读量101 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5be3cd8551882516e54d15b5
版权

前言 Vuejs相关教程，可参阅网站，先熟悉vue.js的基本语法。本文档讲述，以CDN的方式（在页面上，引入相关的js和css文件），来实现。 本文档适用于vuejs初学者，之前给公司实习生学习准备的，很多相关知识暂不全，敬请谅解。

1 页面结构

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”来标识。

2 基本模块

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

<script>
	new Vue({
        el:'#app',
		data:{
		    初始化页面上绑定的模型，数据
		},
        filters:{
            过滤器，简单数据处理。
        },
		mounted:function(){
		    页面载入时调用的方法，
		},		
		methods:{
	    	事件方法
		},
		watch：{
		    数据监听。
		}
	})
</script>
复制代码
data: 页面初始化时，定义的元素模块，也是数据的容器，每一个栏位都会用到，类似于之前的普通写法里边的name，id等，但是比那个强大。
filters:这一块是过滤器，一般是处理数据用的。
mounted：页面加载是调用的方法，这便涉及到Vuejs的生命周期，大家可以去了解。根据不同情况调用，我自己遇到过关于图表方面，家在先后顺序的问题。
watch: 用于页面模块的数据监听。数据发生改变的时候，页面展示进行切换。
methods:事件方法都写在这个里边。例如点击事件。

正常情况下，页面结构就是上边的属性，当然顺序调换也未尝不可，看个人习惯。除了data外，其他模块用不到的，可以去掉。

3.vue.js常用的指令

[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里边的数据，页面上其他的数据也会相应改动。

1 v-bind指令

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>
复制代码

(这种情况，可用于，按钮点击，更换状态，样式等)

2 v-if(v-else-if,v-else)指令

主要是在页面上给出相应的条件，例如

<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..语句的写法基本类似，也可以进行嵌套。

3 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上 例如： 标签中不允许带双括号。例如，以下这种写法

4.vue.js常用事件

1 点击事件

常用事件声明为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>
复制代码
2 监听事件

监听事件，当栏位值发生改变的时候，使用。，原来的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>
复制代码
3 过滤器

过滤器写在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>
复制代码
weixin_33978044
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的一些高级用法
weixin_36852235的博客
06-18 4234
导言 用vue 蛮久了才发现自己有很多比较方便的用法都没有用过，还是自己当初在开始学的时候掌握的，是在惭愧。这些在各种组件源码中经常看到，以为都是很高级很高级的用法，其实你会发现这些都是在Vue官方文档中写的很仔细很仔细的，但是我自己从来没有看过。这次算给自己上了一节课了，在刚开始学习的时候可以粗略的过，但是用了一段时间之后，一定要回过来在仔细的阅读官方文档。 js部分 组件递归 组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事： // 一遍编写复杂组件的时候可能会用到
手把手教你玩转Vue
start1018的博客
02-28 443
什么是VUE   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 VUE.js的安装   先创建一个 .html 文件，然后通过如下方式引入 Vue： <script src="js/vue.js"></script
8、组件高级玩法：动态组件
学海无涯苦作舟
02-09 2656
正常在父组件中使用子组件的方法是如下： 父组件html模板代码中：<!--前面的内容--> ... <child-component></child-component><!--这里直接插入子组件标签，然后标签里面的内容都是固定的--> ... <!--后面的内容-->但是如果我们不想这样固定地插入子组件，而是想通过代码动态地创建该如何进行呢？下面就介绍用代码动态创建组件： 直接看代码： 首先
VUE父子组件传值（含实例）
Don't disturb me!的博客
09-10 5586
vue父子组件 1.父传给子（在子组件中改数据） 父组件： 1.在子组件上绑定数据arrData 2.在data()中给出定义（注意数据类型） 3.对需要传给子组件的数据进行相应操作 子组件： 1.在props中给出定义 2.watch监听数据变化 3.在watch定义的方法里对数据进行操作（与子组件自己的数据进行交互） 2.子传给父（不可以在传给父组件之后修改数据） 根据情况讨论，这里是因为子组件被父组件在一个界面多次调用，为了区分开组件，设置了一个spantitle作为唯一key，然后把spanti
Vue学习笔记12-computed计算属性的玩法
doublewe的博客
01-17 225
前言： computed是什么？computed就是跟methods类似的一个函数集。可以在里面写函数，唯一不同的是，computed里写的函数必须要有返回值，最后return的数据可以像数据模型里的数据一样去使用它。 1.我们创建一个Vue实例： const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div ...
来了来了！Chrome 高级玩法，秒变摸鱼神器
weixin_44421461的博客
02-16 534
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！源码精品专栏原创 | Java 2019 超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析...
Vue中你不知道但却很实用的黑科技
weixin_33849215的博客
12-05 389
本文纯技术干货，首发于 掘金，转载请注明出处和作者。最近数月一直投身于 iView 的开源工作中，完成了大大小小 30 多个 UI 组件，在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科技的组件，这些特性有的是 Vue 文档中提到但却容易被忽略的，有的更是没有写在文档里，今天就说说 Vue 组件的高级玩法。 写在前面 本文所讲内容大多在 iView 项目中使用，大家可以前往...
vue.js竟然可以这么玩!
weixin_44105087的博客
06-12 187
Vue.js 父子组件生命周期顺序 /* 加载渲染过程 */ parent beforeCreate ↓ parent created ↓ parent beforeMount ↓ child beforeCreate ↓ child created ↓ child beforeMount ↓ child mounted ↓ parent mounted /* 更新过程 */ // 子组件更新
vue高级技巧
兰亭古墨
11-05 1116
1、索引数组的修改，vue无法劫持该数据进行响应式变化，代码如下： 当btnClick触发时，视图并不会相应更新 <template> <div> <span v-for="(item, index) in testData" :key="index"></span> </div> </template> export...
Vue基础教程，使用方法
热门推荐
月苏西的博客
01-13 1万+
一.引入vue.js 二.创建一个vue实例 在实例化vue的时候，有两种挂载方式 1.最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素 el：设置被操作的元素，表示vue要控制的区域，值为css选择器 data： 类型是对象 作用存放要用到的数据，数据为响应式的 三.将数据绑定到页面元素 {{lcy}} 四.指令 什么是指令？ ...
谈谈key的唯一性特殊处理
Front小思的博客
06-17 964
通常： key 管理可复用的元素，key给每个vnode的唯一id，可以依靠key，更准确、更快拿到oldVnode中对应的vnode节点 。 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。 为了给 Vue 一个提示，以便它
VueJS简明教程(一)之基本使用方法
无糖
06-13 1万+
简介：这是一篇超级简单的入门文章 如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。 Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。 就像开车，不是非要知道发动机的工作原理才能上路...
Vuejs基本知识(二)【定义一个页面】
极客神殿
12-19 691
创建一个页面 激动人心的时刻到来了！ 接下来我们要通过自己动手，开始下一步的学习！ 请各位同学务必准备好电脑。 只有一边学习一边敲代码，才能真正的看到效果。 调试代码的过程是无法脑补出来的。切记切记！ 在Vuejs中创建页面需要两步： 新建路由 新建vue页面 新建路由 默认的路由文件是 src/router/index.js, 打开之后, 我们增加两行: import Vue from 'v...
vue-总结3-混入-高级-组件（扩展）
weixin_45413276的博客
09-24 716
混入（了解一下） 局部混入 new Vue({ el: '#app', mixins: [ obj ]//把这边的obj分离到另外一个js文件定义，然通过script引入符合模块化的思想 }) 全局混入 //直接挂在vue上，通过Vue.mixin定义是全局混入 Vue.mixin({ methods:{ aa(){ alert(1) ...
vue高级用法
acm_cn1234567890的博客
10-11 938
1. 动画特效----transition 2. 插槽 slot 插槽就是子组件中的提供给父组件使用的一个占位符，父组件可以对插槽填充任何内容。 插槽和组件的区别是： ①组件之间的传递是单纯的数据的传递，而插槽的传递是视图的传递。 ②插槽的内容显示是由谁调用就由谁来决定插槽的内容，组件的内容是提前已经写好了，只进行数据的简单改变。 3. Mixin 4. 过滤器 vue3已弃用 过滤器的使用 5. keep-alive的实现原理 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现
如何优雅的使用vue？不可不知的vue高级实战技巧
SweetAnnVII小宝贝的空间
11-11 587
解决繁琐import 结构清晰整洁，可读性高。便于维护。 全局注册组件 //将高频组件放在同一个目录下，在该目录下增加一个global.js文件，在main.js中引入 //global.js import Vue from 'vue' //获取指定目录下的指定格式的文件 let requireComps = require.context('./', false, /\.vue$/); //循...
vuejs基础知识
developestudent的博客
07-05 288
@vuejs基础知识整理 vuejs基础整理 主要整理了vue的mmvm模式和基础的指令 mmvm模式 mmvm模式拆分解释 Model 负责数据存储 View 负责页面显示 View Model 负责业务逻辑处理(比如ajax请求等)，对数据进行加工后交给视图展示。 MMVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护简单。 3...
vuejs基础知识总结
milli236的博客
08-29 774
1.数据库返回数据渲染dom。img图片src的问题       属性添加。v-bind缩写 ：       不要花括号，需编译为字符。外加单引号 2.同理绑定自定义属性 3.上面2绑定事件获取自身元素的属性值， e.target 拿到点击的目标元素       而 event.currentTarget对象就是当前元素，vue传递event
Vuejs入门到精通：零基础开发者指南
课程通过实例演示，如创建HelloVuejs项目和实现列表展示，帮助学员熟悉基础操作和组件化开发，让抽象的概念更具实操性。 接下来，课程深入探讨Vue.js的高级特性，如解耦视图与数据、可复用的组件、前端路由技术...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值