1.导入vue库,以npm导包方式
代码都上传到了gitee,可以clone到本地,另外还附加了es6的学习笔记
https://gitee.com/reflectstar/vue-demo.git
// 初始化npm模块
npm init -y
npm install vue
新建一个文件夹作为自己的工作目录,在此工作目录中打开terminal,输入上述两个指令
当文件夹出现两项内容,说明初始化成功,可以正常使用vue库了,当然也可以直接下载vue库,然后引入的方式。
2.编写建议的模型与数据绑定效果
给vscode加两个插件
新建一个index.html
// An highlighted block
<body>
<div id="app">
<h1>{{name}},is very handsome!!!</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{
name:"dengyongqing"
}
})
</script>
</body>
页面效果是
F12,通过控制台体会变量与绑定视图元素之间的关系
3.体会双向绑定效果
// An highlighted block
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">like</button>
<button v-on:click="cancel">cancel</button>
<h1>{{name}},is very handsome!!! and got {{num}} likes</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1.声明式渲染
let vue = new Vue({
el:"#app",
data:{
name:"dengyongqing",
num:1
},
methods: {
cancel() {
this.num--;
}
}
})
//2.双向绑定,模型变化,视图变化,反之亦然
//3.事件处理
//4.v-xx指令
//{1.new vue(),将数据关联到视图模板中 2.通过指令或者编写方法来进行响应}
</script>
</body>
效果