Vue入门学习总结一:Vue定义
Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改。
首先我们需要在script中定义一个Vue实例,定义方法如下:
var vm =new Vue({
el: '#app',
props:{}
data: { },
methods:{},
computed:{},
watch:{},
component:{},
template: {},
directive:{},
beforecreate:{}
created:{},
beforemount:{},
mounted:{},
filter:{}, //后面进行补充
})
以上除el外其他项均可为空,或直接不包含。
el:挂载点,通常我们会将Vue实例挂载点一个同id的Div,就像下面这个
<div id=”app”>
</div>
data:属性,采用键值对的方式进行声明。示例:
data: {
text:'123,456',
message: 'Runoob!'
},
在组件内部方法可通过this.text来访问text属性
另外data还可以使用外部声明的对象,比如如下语句:
var mydata =
{
site: "小牛",
url: "www.baidu.com",
alexa: 10000
}
var vm = new Vue({
el: '#vue_det',
data: mydata
})
此处与mydata对象为同一地址,修改会相互影响,可直接通过vm.site来进行访问。
props:参数,props 可以是数组或对象,用于接收来自父组件的数据。
<div id="app1">
<child my-message="hello!"></child> //父组件中设置子组件参数
<child :my-message=" message "></child> //子组件参数绑定到父组件中的message属性
</div>
<script> Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '<span>{{ myMessage }}</span>' })
new Vue({
el:"#app1",
data:{
message: 'Runoob!'
}
})
</script>
特别注意:js中用驼峰式命名,在html中需替换成短横线分隔式命名
methods:方法,提供可供内部或者外部调用的接口,可带参也可不带参,可有返回值也可没有返回值,示例如下:
不带参:
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
带参:
reverseMessage:function(num){
this.message = this.message+num
}
有返回:
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
computed:计算属性,计算属性是一种只读属性,示例如下:
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
会发现计算属性与有返回的Vue方法相似,不过区别在与,Vue方法在每次渲染均会重新运算,但计算属性只会在依赖项变化后才会重新运算。
watch:属性监听,可对实例的属性进行监听,出现变化便运行指定的方法,例如:
不带参:
message:function(){
this.text = this.text + this.message
}
带一个参:此时的参数val即为被监听属性message的新值
message:function(val){
this.text = this.text + val
}
带两个参:参数分别为被监听属性的新值和旧值
message:function(newval,oldval){
this.text = this.text + newval + oldval
}
另外我们还可以在Vue外部对属性进行监听,方式如下:
vm.$watch('kilometers', function (newValue, oldValue) {
、、、、//此处省略一万字
})
component:组件,提供模板,在Vue内部注册的为局部模板,方式如下
局部组件
可以在Vue外部定义一个模板变量,例如
var Child = { template: '<h1>自定义组件!</h1>' }
再在Vue内部进行声明,例如:
components: { // <runoob> 将只在父模板可用
'runoob': Child
}:
全局组件
在Vue外部定义全局的模板,例如:
Vue.component('runoob',{ template: '<h1>自定义组件!</h1>' })
这样在不同的Vue挂载点下均可以使用该组件,如何使用component呢,可以参考下面的示例:
<div id="app">
<runoob></runoob>
<h1>哈哈哈哈</h1>
</div>
另外component也是一个Vue实例,我们可以在里面添加参数props、方法methods等均可。
例如:
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
template:模板,如果为空,则挂载点下的元素就为模板,如果挂载点下元素不为空,则采用挂载点下的元素作为模板,即template模板无效,例如
template: '<h1>自定义组件!</h1>'
此时如果挂载点下包含元素,例如
<div id="app1">
<h1>dfsdfsdf</h1>
</div>
则该template无效,
directive:自定义指令,可以全局注册也可以局部注册,例如下面的示例,可以让DOM元素在加载时获取光标。
局部注册,挂载点默认加载时获得焦点
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
也可以采用全局注册的方式:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
然后通过在节点元素添加v-focus即可使用,例如:
<input v-focus>
生命周期
下面是一个有关生命周期的Vue示例,
var myVue=new Vue({
el:"#app-8",
data:{
data:"aaaaa",
info:"nono"
},
beforeCreate:function(){
console.log("创建前========")
},
created:function(){
console.log("已创建========")
},
beforeMount:function(){
console.log("mount之前========")
},
mounted:function(){
console.log("mounted========")
},
beforeUpdate:function(){
console.log("更新前========");
},
updated:function(){
console.log("更新完成========");
},
beforeDestroy:function(){
console.log("销毁前========")
},
destroyed:function(){
console.log("已销毁========")
}
})
不同的时间节点,页面所处的状态不一样,例如:
Beforecreate:Vue实例的挂载点及数据data均还未初始化
Create:Vue实例的数据data已经初始化,但挂载点还未初始化
Beforemounted:Vue实例的挂载点的DOM还是虚拟的,比如{{data}},就是虚拟DOM
Mounted:此时Vue实例的挂载点已经是真实的DOM。可进行有关挂载点节点的相关操作。
上诉即为Vue定义的内容,因为时间关系明天会对该博客进行补充,后面还将对Vue提供的语法进行讲解。
Vue入门学习总结一:Vue定义的更多相关文章
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue入门学习
目录 Vue 简介 第一个Vue程序 Vue基本语法 双向绑定 组件 Axios异步通信 计算属性 Slot 自定义事件 第一个Vue-cli程序 webpack学习使用 Vue-Router路由 v ...
- vue入门学习示例
鄙人一直是用angular框架的,所以顺便比较了一下. <!DOCTYPE html> <html lang="en"> <head> < ...
- Js 框架之Vue .JS学习记录 ① 与Vue 初识
目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备 VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...
- vue初级学习--控制台创建vue项目
一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- vue入门——基本概念
1. 挂载点,模板,实例的关系? 首先附上一个基本demo: <!DOCTYPE html> <html lang="en"> <head> & ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
随机推荐
- 题解【洛谷P1347】排序
题目描述 一个不同的值的升序排序数列指的是一个从左到右元素依次增大的序列,例如,一个有序的数列\(A,B,C,D\) 表示\(A<B,B<C,C<D\).在这道题中,我们将给你一系列 ...
- C#对字典Dictionary 的添加,遍历,移除系列操作
C#对字典Dictionary 的添加,遍历,移除系列操作: //一.创建泛型哈希表,然后加入元素 Dictionary<string, string> oscar = new Dicti ...
- redis架构
hash槽16384个,0-16383 master1(slave101,slave102) master2 (slave201,slave202) master 3 (slave30 ...
- android 使用系统级别权限
java.lang.SecurityException: Neither user 10027 nor current process has android.permission.MODIFY_PH ...
- IntelliJ IDEA 2017.3尚硅谷-----安装
选择路径 安装目录 bin目录下的文件 启动文件 虚拟机的配置信息 -Xms128m 初始内存 -Xmx750m 最大内存-XX:ReservedCodeCacheSize=240m 可保留代码缓存的 ...
- np.c_与np.r_
import sys reload(sys) sys.setdefaultencoding('utf-8') import numpy as np def test(): ''' numpy函数np. ...
- Linux /dev/sda1磁盘满了,清理办法
转:https://blog.csdn.net/h_8410435/article/details/86303995 查看内存使用情况 df -lh Filesystem Size Use ...
- phpStudy的虚拟站点域名管理
使用phpStudy在本地环境,使用虚拟域名访问本地站点. 步骤: 0x01 修改配置文件 打开站点域名管理 添加你本地站点的路径,第二域名可以不填,网站端口不填的话默认为80. 先点击新增,再点击 ...
- md5模块(Python内置模块)和hashlib模块
转自https://my.oschina.net/duhaizhang/blog/67214 MD5模块用于产生消息摘要,康用来判断文件是否相同. python的md5模块使用非常简单,包括以下几个函 ...
- Linux按文件名搜索命令
find 搜索目录 -name 目标名字 find / -name file名 /代表是全盘搜索,也可以指定目录搜索 find 搜索文件的命令格式: find [搜索范围] [匹配条件] 选项: -n ...