初识Vue
1、vuejs -----渐进式框架
- Vue是目前最火的一个框架,也是主流框架之一,是一套构建用户界面的框架,只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合。
- 可复用组件
- 前端路由技术
- 状态管理
- 虚拟DOM
2、vue.js安装
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
npm install vue
3、vue初体验
(1)插值操作
<div id="root">
<p>{{message}}</p>
<h4>我是{{name}}</h4>
<input type="text" v-model="message">
</div>
<script>
var app=new Vue({
el:"#root",
data:{
message:"google",
name:'kiki'
}
})
</script>
(2)列表视图
<div id="app2">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
let app=new Vue({
el:"#app2",
data:{
message:"你好啊",
movies:["大话西游","名侦探柯南","星际穿越","盗梦空间"]
}
})
</script>
(3)计数器
- v-on :事件监听 语法糖:@
- v-for : 遍历
- v-model:双向绑定
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
counter: 0
},
methods:{
add:function(){
this.counter++;
console.log("+++++++");
},
sub:function(){
this.counter--;
console.log("--------");
}
}
})
</script>
4、MVVM : Model View ViewModel
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210504221434168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Nzk2NjM4Mg==,size_16,color_FFFFFF,t_70)
5、vue的option选项
- el:string | htmlElement
作用:决定vue会管理哪个dom - data : object | function(组件当中data必须是一个函数)
作用:vue实例对应的数据对象 - methods : 各种方法
- computed : 计算属性
- watch :侦听器
- filter : 过滤器
- 生命周期函数:created(),mounted(),updated()…
- components:组件
- (后续补充…)
6、Vue的生命周期![在这里插入图片描述](https://img-blog.csdnimg.cn/20210504221856615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Nzk2NjM4Mg==,size_16,color_FFFFFF,t_70)