芜湖市建设投资有限公司网站,宣传渠道有哪些,做企业网站的费用挂什么科目,软件开发的环节有哪些文章目录1.vue入门案例1.1.HTML模板1.2.vue渲染1.3.双向绑定1.4.事件处理2.Vue实例2.1.创建Vue实例2.2.模板或元素2.3.数据2.4.方法3.生命周期钩子3.1.生命周期3.2.钩子函数3.3.this1.vue入门案例
1.1.HTML模板
在项目目录新建一个HTML文件 01-demo.html
1.2.vue渲染
01-d… 文章目录1.vue入门案例1.1.HTML模板1.2.vue渲染1.3.双向绑定1.4.事件处理2.Vue实例2.1.创建Vue实例2.2.模板或元素2.3.数据2.4.方法3.生命周期钩子3.1.生命周期3.2.钩子函数3.3.this1.vue入门案例
1.1.HTML模板
在项目目录新建一个HTML文件 01-demo.html
1.2.vue渲染
01-demo.html内容如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idapph2{{name}} 非常酷/h2
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el:#app,//el即element要渲染的页面元素data: {name:Vue}});
/script
/body
/html首先通过 new Vue()来创建Vue实例然后构造函数接收一个对象对象中有一些属性 el是element的缩写通过id选中要渲染的页面元素本例中是一个divdata数据数据是一个对象里面有很多属性都可以渲染到视图中 name这里指定了一个name属性 页面中的 h2 元素中通过{{name}}的方式来渲染刚刚定义的name属性。
打开页面查看效果
1.3.双向绑定
对刚才的案例进行简单修改
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappinput typetext v-modelnumh2{{name}} 非常酷我们有{{num}}个科目。/h2
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el:#app,//el即element要渲染的页面元素data: {name:Vue,num: 1}});
/script
/body
/html 可以观察到输入框的变化引起了data中的num的变化同时页面输出也跟着变化。
input与num绑定input的value值变化影响到了data中的num值页面 {{num}} 与数据num绑定因此num值变化引起了页面效果变化。
没有任何dom操作这就是双向绑定的魅力。
1.4.事件处理
在页面添加一个按钮
!DOCTYPE html
html langen xmlns:v-onhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappinput typetext v-modelnumbutton v-on:clicknum点我/buttonh2{{name}} 非常酷我们有{{num}}个科目。/h2
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar app new Vue({el:#app,//el即element要渲染的页面元素data: {name:Vue,num: 1}});
/script
/body
/html
这里用 v-on 指令绑定点击事件而不是普通的 onclick 然后直接操作num 普通onclick是无法直接操作num的。
效果
2.Vue实例
2.1.创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
var vm new Vue({
// 选项
})在构造函数中传入一个对象并且在对象中声明各种Vue需要的数据和方法包括
el
data
methods
...接下来一 一介绍。
2.2.模板或元素
每个Vue实例都需要关联一段Html模板Vue会基于此模板进行视图渲染可以通过el属性来指定。
例如一段html模板
div idapp/div然后创建Vue实例关联这个div
var vm new Vue({el:#app
})这样Vue就可以基于id为 app 的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
2.3.数据
当Vue实例被创建时它会尝试获取在data中定义的所有属性用于视图的渲染并且监视data中的属性变化当data发生改变所有相关的视图都将重新渲染这就是“响应式“系统。
html
div idappinput typetext v-modelname/
/divjs:
var vm new Vue({el:#app,data:{name:Vue}
})name的变化会影响到 input 的值 input中输入的值也会导致vm中的name发生改变
2.4.方法
Vue实例中除了可以定义data属性也可以定义方法并且在Vue的作用范围内使用。
html:
div idappbutton v-on:clickadd点我/button
/divjs:
var vm new Vue({el:#app,data:{},methods:{add:function(){console.log(点我了...233)}}
})!DOCTYPE html
html langen xmlns:v-onhttp://www.w3.org/1999/xhtml
headmeta charsetUTF-8titlevuejs测试/title
/head
body
div idappbutton v-on:clickadd点我/button
/div
script srcnode_modules/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{},methods:{add:function(){console.log(点我了...233)}}})
/script
/body
/html
3.生命周期钩子
3.1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 创建实例装载模板渲染模板等。 Vue为生命周期中的每个状态都设置了钩子函数监听函数。每当Vue实例处于不同的生命周期时对应的函数就会被触发调用。
在创建vue实例的时候可以指定模板id、数据和方法而如果要在实例化、模板渲染的过程中需要执行一些其它操作的话那么可以使用钩子函数。
所有的生命周期钩子自动绑定 this 上下文到实例中因此你可以访问数据对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () this.fetchTodos() )。这是因为箭头函数绑定了父上下文因此 this 与你期待的 Vue 实例不同 this.fetchTodos 的行为未定义。
生命周期
vm.$el Vue 实例使用的根 DOM 元素
vm.$root 当前组件树的根 Vue 实例。如果当前实例没有父实例此实例将会是其自己。3.2.钩子函数
例如created代表在vue实例创建后 可以在Vue中定义一个created函数代表这个时期的构造函数
创建示例html页面lifecycle.html如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idapp{{msg}}
/div
scriptlet app new Vue({el: #app,data: {//初始化为空msg: },created() {this.msg hello vue. created;}});
/script
/body
/html结果
小结
钩子函数会在vue实例的各个生命周期阶段自动调用具体有beforeCreatecreated,beforeMount,mounted,updated,beforeUpdatedestroyedbeforeDestroy created钩子函数常用场景用于初始化数据 3.3.this
可以看下在vue内部的this变量是谁在created的时候打印this
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevuejs测试/titlescript srcnode_modules/vue/dist/vue.js/script
/head
body
div idapp{{msg}}
/div
scriptlet app new Vue({el: #app,data: {//初始化为空msg: },created() {this.msg hello vue. created;console.log(this);}});
/script
/body
/html控制台的输出 总结 this 就是当前的Vue实例在Vue对象内部必须使用 this 才能访问到Vue中定义的data内属性、方法等。
