Kite学习历程的第三十六天
1. 引入依赖:
- 首先输入:npm -init -y
- 输入: npm install vue 进行vue的安装
2. 在vscode上安装相应的插件,以及谷歌浏览器安装插件
vue代码提示插件
vue代码高亮插件
谷歌安装vue-devtools
插件下载地址:添加链接描述
提取码:sb6b
下载解压后 在谷歌浏览器中进行安装
3. 创建index.html 页面进行简单测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<!-- 插值表达式 : 还可以实现双向绑定: 模型变换,视图变化-->
<input type="text" v-model="num">
<!-- 事件处理 -->
<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消点赞</button>
<h1>{{name}}, 非常帅!有{{num}}为他点赞!</h1>
</div>
<!-- 引入vue依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建以vue去管控一个对象,申明渲染
/**
*
*/
let vm = new Vue({
// 指明控制的对象
el: "#app",
data: {
name: "Kite",
num: 1
},
//方法存放区
methods:{
cancle(){
this.num--;
}
}
});
</script>
</body>
</html>
4 打开页面测试
vue的谷歌插件也有了