vue基础特性
Posted winner-one
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础特性相关的知识，希望对你有一定的参考价值。
在这里我们主要是讲解一些vue实例的属性和一些基础的指令
vue实例属性:
其实和我们之前所学的对象的属性是相似的东西
vue的基础指令:
对于指令,大家可能之前么有接触过相关的概念,其实大家可以这样理解
指令:
可以看做是命令,在vue中我们可以通过指令来完成相关的操作；在vue中以v-开头,后面紧跟具体的操作命令
一些基本的指令：
v-once: 只绑定一次
v-bind: 绑定数据
v-model: 绑定模型
v-on: 绑定事件
v-if v-show: 条件渲染
方法：
使用methods来定义方法,使用v-on监听事件,绑定事件处理函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入js--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <!--在这里使用v-on来绑定事件处理的方法(函数)--> <button v-on:click=‘fn‘>click</button> </div> </body> </html> <script> var dataModel = { message: ‘hello world!‘ } var vm= new Vue({ el:‘#app‘, data:dataModel, //在这里使用methods对象来定义方法(点击事件处理函数) methods:{ fn: function(){ console.log("这个方法被调用了") } } }) </script>
生命周期钩子函数：
- 其实指的也就是生命周期方法,只不过是挂载到执行的各个阶段,所以叫钩子函数
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之生命周期</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="text" name="btnSetNumber" v-model="number">
</div>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
number: 1
},
//在创建对象之前,监控数据变化和初始化事件之前调用
beforeCreate: function() {
console.log(‘beforeCreate 钩子执行...‘);
console.log(this.number) //数据监测还没有开始
},
//实例创建完成之后调用,挂载阶段还没有开始
created: function() {
console.log(‘cteated 钩子执行...‘);
console.log(this.number)
},
//开始挂载的时候执行,这时html还没有渲染到页面上
beforeMount: function() {
console.log(‘beforeMount 钩子执行...‘);
console.log(this.number)
},
//挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
mounted: function() {
console.log(‘mounted 钩子执行...‘);
console.log(this.number)
},
//数据更新之前调用
beforeUpdate: function() {
console.log(‘beforeUpdate 钩子执行...‘);
console.log(this.number)
},
//数据更新之后调用
updated: function() {
console.log(‘updated 钩子执行...‘);
console.log(this.number)
},
//数据销毁之前
beforeDestroy: function() {
console.log(‘beforeDestroy 钩子执行...‘);
console.log(this.number)
},
//数据销毁之后
destroyed: function() {
console.log(‘destroyed 钩子执行...‘);
console.log(this.number)
},
});
//实现数据的更新
// vm.$set(dataModel, ‘number‘, 123)
//销毁钩子的执行
// vm.$destroy(true)
</script>
</body>
</html>
补充：
1.activated
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
2.deactivated
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
以上是关于vue基础特性的主要内容，如果未能解决你的问题，请参考以下文章
[vscode]--HTML代码片段（基础版，reactvuejquery）