开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue.js 指南-基础

简介:
+关注继续查看





Installation


可以使用的方式:

script标签方式加载vue.js

cdn https://unpkg.com/vue@2.0.5/dist/vue.js

npm

Introduction


通过指定的语法渲染js变量

DOM元素与变量绑定,同步更新,无需手动操纵DOM

通过vue标签属性,完成绑定data,绑定事件,条件语句以及循环等特性

创建自定义可复用的组件,可直接在html标签中使用

The Vue Instance


Vue构造方法创建实例,并且可以扩展构造方法创建可重用的组件(继承?)

每一个Vue实例都代理了data参数中所有的属性,并且如果在Vue对象实例化之前你的自定义变量绑定到了data中,那么他们的值是时刻同步的

每个Vue对象在实例化的过程中,经历了一系列的过程,就是有它的生命周期

Template Syntax


Vue使用基于HTML的语法,允许你将渲染到DOM中元素与Vue实例中的data数据绑定

Vue把模板数据编译到虚拟DOM的渲染方法中,根据app不同的状态,实现最少量的组件的重新渲染

{{}}法上可以渲染文本、可以支持javascript表达式,可以通过管道实现过滤

Computed Properties and Watchers


{{}}语法中可以使用js表达式,但是并不推荐,不易于维护,不利于调试,引入 computed属性,compulted属性依赖于现有的属性,只要依赖值没变,其值不变,页面中多处使用可以直接返回计算好的值,与之对应的用方法实现,每次都要执行一遍

对于数据和页面的rective,compluted可以满足大多数情形,当你需要完成异步并且有大量的数据计算响应等操作,可以使用watch选项

总结:compluuted与watch的目的都是监听Vue实例数据的变化,并作出响应

Class and Style Bindings


使用Vue定义的属性v-bind:class可以进行样式类的绑定,支持丰富的格式,可以使用对象的方式在vuedata option中定义,可以使用数组传递多个类名,可以依赖于现有的data使用compluted属性,可以跟现有的html标签类混用等等

v-bind:style可直接绑定书写行内样式,支持对象方式、数组方式

Conditional Rendering


条件标签v-if ,v-show,可以做条件判断来进行html元素的显示

不同点在于v-if根据值的变化每次重新渲染,v-show等价于display:show|none也就是元素是在页面中渲染好的

Event Handling


v-on标签绑定各种事件,可以做v-on:click="counter += 1"这种简单的处理,也可以调用Vue中方法(方法可将原生的DOM event通过$event传递)

经常用到的阻止事件冒泡或阻止事件的默认行为在Vue中可以与v-on搭配使用点语法.stop .prevent .capture .self来实现,不需要再去关心具体的DOM事件细节

针对键盘的key值监听,Vue提供也提供了简单的绑定语法v-on:keyup.键值,也可使用vue提供的定义好的常用键值的别名

Form Input Bindings


v-model可以处理基本的用户输入(input)、复选框、单选框等的值赋值给v-model指定的变量

仅仅使用v-model只可以获取用户输入的字符串或者true false(单、富选框),可以使用v-bind将input的value与vue的属性绑定,这样可以动态的修改

Components


组件用来扩展现有的html标签并进行封装重用

使用自定义components需要在实例化Vue对象之前确保组件已经注册

除注册为全局组件之外,可以注册为某一个vue实例的本地组件

在页面中直接使用自定义组件时,浏览器会无法解析,需要使用is=组件名

组件中的data option必须为一个function,否则console 报 warnning

组件复用不可避免的需要不同组件嵌套使用,涉及到数据的向下传递,Vue通过props option传递【注:props在js中的驼峰命名在html中需要改为连字符】

对于组件需要接收的参数,Vue提供了参数验证

子组件与父组件的通信是通过customer events即自定义事件

v-on:事件名来监听子组件可能触发的事件

v-on:click.native=""同样可以监听原生的JavaScript事件

非父子关系的组件也可以通过hook的方式完成通讯



















本文转自xsster51CTO博客,原文链接:http://blog.51cto.com/12945177/1929775 ,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vue面试题4:1.组件通信;2.路由嵌套;3.< keep-alive >作用
请说明< keep-alive >组件的作用 当< keep-alive >包 裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 < keep-alive >是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。 当在< keep-alive >内切换组件时,它的activated 和deactivated 这两个生命周期钩子函数将会执行。
27 0
vue相关面试题2:1.封装vue组件作用;2双向数据绑定原理;3.Router 是什么;4.导航钩子有哪些
它们有以下参数。 ●to::即将要进入的目标路由对象。 ●from:当前导航正要离开的路由。 ●next: 一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。
66 0
Vue系列专栏- - - VUE组件
​ 作者是名退役复学在校大学生,对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究,欢迎关注,和我一起交流。 一、为什么需要组件? 一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块 vue组件化 应用:任何应用都是一颗组件树 1.创建组件 2.创建组件语法糖写法 省去Vue.extend()的调用,可以直接使用一个对象代替 Vue.component("myCpn", {    template: `            <div>            <h1>广告</h1>
36 0
Vue 系列讲解---Vue组件
博主传送门: 叶秋学长 博主简介: 全栈领域新星创作者,新星计划第三季人工智能赛道TOP2;阿里云技术博主;退役复学在校大学生,全栈JAVA领域创作者,目光所至,皆为华夏 系列专栏跳转: Vue讲解 Spring系列 Spring Boot 系列 云原生系列(付费专栏) 今天叶秋学长带领大家继续学习vue讲解系列专栏中的Vue组件~~ 一、为什么需要组件? 一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块 vue组件化 应用:任何应用都是一颗组件树 1.创建组件 const cpn = Vue.extend({}):创建一个组件构造器 t
39 0
前端-vue基础63-非父子组件传值
前端-vue基础63-非父子组件传值
22 0
前端-vue基础57-局部组件注册
前端-vue基础57-局部组件注册
33 0
前端-vue基础100-路由组件传递参数2
前端-vue基础100-路由组件传递参数2
23 0
前端-vue基础62-子组件通过自定义事件向父组件传值
前端-vue基础62-子组件通过自定义事件向父组件传值
18 0
前端-vue基础69-购物车3标题组件和结算组件
前端-vue基础69-购物车3标题组件和结算组件
21 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
工程师职业发展之我见
立即下载
数字营销 助力传统企业通往电商之路
立即下载