本文介绍了Vue.js的基本使用，包括如何引入Vue.js文件，定义和赋值对象，展示文本，以及使用v-if、v-show控制元素显示，v-on:click事件监听和响应式数据绑定。同时，还详细讲解了Vue的生命周期方法，如beforeCreate、created、beforeMount、mounted等。
Vue快速入门
Vue.js的引入
要先有一个vue.js文件，可以在vue官网下载，将其复制到项目中并在html页面中进行引入：
在head标签内引入，src内是vue的路径
<!-- 引入vue.js-->
<script language="JavaScript" src="xxxxxxxxx/vue.js"></script>
Vue的js语法要写在head标签下的下面这个标签内:
下面代码实现了一个简单的alert hello功能
<!-- Vue的js可以写在这里-->
<script language="JavaScript">
function hello() {
person.sayHello();
}
var person = new Object();
person.pid="p001";
person.pname="jim";
person.sayHello = function(){
alert("Hello World");
}
<!-- 在窗口加载时触发下面方法-->
window.onload=function(){
// 存储一个个键值对，注意花括号在里面
var vue = new Vue({
});
}
</script>
Vue中对象的定义
可以向下面这样使用等式的方式直接进行定义与赋值
一个person对象的定义与赋值
var person = new Object();
person.pid="p001";
person.pname="jim";
person.sayHello = function(){
alert("Hello World");
}
也可以像下面这样定义：
//对象定义的另一种方式，注意花括号后有分号,以逗号分割，最后一个属性不带逗号
var person = {
"pid" : "p001",
"pname" : "jim",
"sayHello" : function() {
alert("Hello World");
}
};
Vue中文本的显示
在vue的语法中定义window.onload中定义var vue = new Vue({})并在其中进行定义：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="../script/vue.js"></script>
<script language="JavaScript">
window.onload=function(){
var vue = new Vue({
"el" : "#div0",
data : {
msg : "hello!!!",
uname : "请输入"
}
});
}
</script>
</head>
<body>
<div id="div0">
<span>{{msg}}</span>
<input type="text" v-bind:value="uname" />
</div>
</body>
v-if、v-else、v-show可以控制标签的显示
<div id="div0">
<input type="text" v-model:value="num" />
<!-- v-if实现简单的成立就显示
v-else表示不成立就显示（否则的意思）
成对出现，中间不能有任何语句
-->
<div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse"> </div>
<!-- 这里不能有任何语句-->
<div v-else="num%2==0" style="width:200px;height:200px;background-color: coral"> </div>
<!-- v-show也有v-if的效果，
但其在语句不成立时会在后面添加display="none"即不显示语句
而v-if则会直接将语句不生效（看起来和删除一样）
-->
<div v-show="num%2==0" style="width:200px;height:200px;background-color: cornflowerblue"> </div>
</div>
v-on:click可以实现点击后方法的调用
<script language="JavaScript">
<!-- 在初始化窗口时的做法-->
window.onload=function(){
var vue = new Vue({
"el" : "#div0",
data : {
msg : "hello world"
},
//vue中的方法写在这里
methods : {
// 将字符串反转的方法示例
myReverse : function() {
//将字符串全部拿出来，反转再拼接
this.msg = this.msg.split("").reverse().join("");
}
}
});
}
</script>
</head>
<body>
<div id="div0">
<span>{{msg}}</span>
<!-- 点击后调用myReverse方法-->
<input type="button" value="反转" v-on:click="myReverse" />
<!-- 也可以这么写-->
<input type="button" value="反转" @click="myReverse" />
</div>
</body>
侦听
侦听标签，当某个属性发生变化时，自动执行某个方法
//侦听，当其中的属性放生变化时，执行对应的方法
watch : {
num1:function(newValue) {
this.num3 = parseInt(this.num2) + parseInt(newValue);
},
num2:function(newValue) {
this.num3 = parseInt(this.num1) + parseInt(newValue);
}
}
...
<div id="div0">
<input type="text" v-model="num1" size="2" />
+
<input type="text" v-model="num2" size="2" />
=
<span>{{num3}}</span>
</div>
对象加载时间的方法调用：
<script language="JavaScript" src="../script/vue.js"></script>
<script language="JavaScript">
<!-- 在初始化窗口时的做法-->
window.onload=function(){
var vue = new Vue({
"el" : "#div0",
data : {
msg : "h1"
},
methods : {
changeMsg : function() {
this.msg = "hello world";
}
},
/* vue对象创建之前 */
beforeCreate:function(){
console.log("beforeCreate:Vue对象创建之前..............");
//vue对象创建之前，msg属性还没有创建
console.log("msg:" + this.msg);
},
/* vue对象创建之后 */
created:function() {
console.log("Created:Vue对象创建之后..............");
//vue对象创建之后，msg属性被创建并赋值了
console.log("msg:" + this.msg);
},
/* 数据装载之前，意思是数据还没有显示在页面上时 */
beforeMount:function() {
console.log("Create:数据装载之前.....................");
/* 获取span内部的数据 */
console.log("msg:" + document.getElementById("span").innerText);
},
/* 数据装载之后 */
mounted:function() {
console.log("Mounted:数据装载之后。。。。。。。。。。。。。。。");
console.log("msg:" + document.getElementById("span").innerText);
},
/*
* 以下两个时间的方法只有在数据被改变之后才会调用
* */
/* 数据更新之前 */
beforeUpdate : function() {
console.log("数据更新之前...............................");
console.log("msg:" + this.msg);
console.log("msg:" + document.getElementById("span").innerText);
},
/* 数据更新之后 */
updated : function() {
console.log("数据更新之后...............................");
console.log("msg:" + this.msg);
console.log("msg:" + document.getElementById("span").innerText);
}
});
}
</script>
</head>
<body>
<div id="div0">
<span id="span">{{msg}}</span>
<input type="button" value="改变" @click="changeMsg" />
</div>
</body>
浏览器控制台的输出如下：
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9330 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:22 beforeCreate:Vue对象创建之前..............
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:24 msg:undefined
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:29 Created:Vue对象创建之后..............
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:31 msg:h1
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:36 Create:数据装载之前.....................
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:38 msg:{{msg}}
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:43 Mounted:数据装载之后。。。。。。。。。。。。。。。
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:44 msg:h1
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:49 数据更新之前...............................
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:50 msg:hello world
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:51 msg:h1
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:56 数据更新之后...............................
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:57 msg:hello world
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:58 msg:hello world
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
