1.创建Vue项目
1.新建项目工程
vscode本身没有新建项目的选项,所以要先创建一个空的文件夹。这里,我们新建一个 VueDemo 的文件夹.然后使用vscode打开文件夹
2.安装vue
1.可以使用script标签引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
2.也可以使用npm安装到本地, 这里我们演示使用npm安装
使用终端打开文件夹,输入以下命令, 若不加@2.6.14则默认安装最新版
npm install vue@2.6.14
安装成功
3.使用vue
新建html文件,使用标签引入本地vue文件, 注意路径不要写错
<script src="../node_modules/vue/dist/vue.js"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>my name is {{name}}</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
name:"lisi"
}
});
</script>
</body>
</html>
首先通过 new Vue()来创建 Vue 实例 , 然后构造函数接收一个对象,对象中有一些属性:
- el:是 element 的缩写,通过 id 选中要渲染的页面元素,本例中是一个 div
- data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中
- name:这里我们指定了一个 name 属性, 页面中的
h1
元素中,我们通过{{name}}的方式,来渲染刚刚定义的 name 属性。
open with livw server
2.Vue组件
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。 例如可能会有相同的头部导航。 但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部 分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。 在 vue 里,所有的 vue 实例都是组件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>my name is {{name}}</h1>
<couter></couter>
<mybtn></mybtn>
<mybtn></mybtn>
<mybtn2></mybtn2>
<mybtn2></mybtn2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 1.定义全局组件,两个参数:1,组件名称。2,组件参数
Vue.component("mybtn",{
template:`
<div>
<p>{{num}}</p>
<input type="button" value="点击num加1" @click="num++">
</div>
`,
//data必须是函数,不能写成data:{num:1}
data(){
return {
num:1
}
}
})
// 2.定义局部组件
const btn = {
template:`
<div>
<p>{{num}}</p>
<input type="button" value="点击num减1" @click="num--">
</div>
`,
//data必须是函数,不能写成data:{num:1}
data(){
return {
num:100
}
}
}
new Vue({
el:"#app",
data:{
name:"lisi"
},
components:{
mybtn2 : btn
}
});
</script>
</body>
</html>
3.Vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模 板等等。Vue 为生命周期中的每个状态都设置了钩子函数(监听函数)。每当 Vue 实例处于 不同的生命周期时,对应的函数就会被触发调用。
- beforeCreated:我们在用 Vue 时都要进行实例化,因此,该函数就是在 Vue 实例化时调用,也可以将他理解为初始化函数比较方便一点,在 Vue1.0 时,这个函数的名字就是 init。
- created:在创建实例之后进行调用。
- beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}
- mounted:我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在 用 jquery,所以也可以理解为 jquery 中的$(document).ready(function(){….}),他的功能就 是:在dom 文档渲染完毕之后将要执行的函数,该函数在 Vue1.0 版本中名字为 compiled。
- beforeDestroy:该函数将在销毁实例前进行调用 。
- destroyed:改函数将在销毁实例时进行调用。
- beforeUpdate:组件更新之前。
- updated:组件更新之后。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>my name is {{name}}</h1>
<couter></couter>
<mybtn></mybtn>
<mybtn></mybtn>
<mybtn2></mybtn2>
<mybtn2></mybtn2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
name: "lisi"
},
methods: {
show(){
console.log("======show========");
},
add(a,b){
return a+b;
}
},
beforeCreated() {
console.log("beforeCreated");
},
created() {
this.show();
console.log("created");
console.log("3+4="+this.add(3,4));
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeDestroy() {
console.log("beforeDestroy");
},
destroyed() {
console.log("destroyed");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
}
});
</script>
</body>
</html>