给项目安装Vue
终端下
1.项目初始化,出现json文件
npm init -y
2.安装Vue,在node_modules下有Vue文件
npm install vue
3.引入Vue
<script src="./node_modules/vue/dist/vue.js"></script>
声明式渲染
<div id="app">
<h1> {{name}} ,非常帅</h1>
</div>
这里使用差值表达式{{}}直接从数据库取出数据动态显示
let vm = new Vue({
el: "#app",//绑定元素
data: { //封装数据
name: "张三",
}
});
el:元素,直接用"#id"绑定上面的id
F12在控制台里输入 vm.name="李四"可以实现直接更改
双向绑定
div id="app">
<input type="text" v-model="num">
<h1> {{name}} ,非常帅,有{{num}}个人为他点赞</h1>
</div>
利用 v-model实现双向绑定
data: { //封装数据
name: "张三",
num: 1
}
元素 模型 某一个数据绑定 输入框变了元素也会变,反之也成立
双向绑定,模型变化,视图变化。反之亦然
<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>
<h1> {{name}} ,非常帅,有{{num}}个人为他点赞{{hello()}}</h1>
methods:{ //封装方法
cancle(){
this.num -- ;
},
hello(){
return "1"
}
}
总结
1、创建vue实例,关联页面的模板,将自己的数据(data)渲染到关联的模板,响应式的
2、指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。methods里面可以封装方法。