1.Vue初体验
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。~
1.1Vue是一个渐进式的框架
Vue有很多特点和Web开发中常见的高级功能
-
解耦视图和数据
-
可复用的组件
-
前端路由技术
-
状态管理
-
虚拟Dom
1.2安装Vue
1.3.Vue初体验
-
Hello Vuejs
-
Vue列表展示
-
Vue计数器小案例
- 事件监听:click->methods @click
-
代码规范:缩进两个空格
1.4.Vue中的MVVM
MVVM
Modle ViewModel View
1.5.创建Vue时,options可以放哪些东西
二、插值语法
-
mustache语法 (声明式编程替代命令式编程)(双大括号语法)
-
v-once 只渲染一次
-
v-html 显示成html的格式
-
v-text 显示文本,不够灵活
-
v-pre:{{}} 显示原本的样子,不改变内容,如{{}}会直接显示
-
v-cloak ()斗篷)在vue解析之前,div中有一个属性v-cloak
三、v-bind
3.1.v-bind绑定基本属性
3.2.v-bind动态绑定class
-
对象语法
- 在class中 v-bind:class“{key1:value1,……}”v-bind:class“{类名1:true,类名2:false,……}”
-
数组语法
3.3.v-bind动态绑定style
四、计算属性
-
案例一:firstName+last Name
-
案例二:books->price
案例一代码:
<script>
const app = new Vue({
el:"#app",
data:{
firstName:'xiaoming',
lastName:'huang'
},
methods:{
getfullName(){
return this.firstName +" "+this.lastName
}
},
computed:{
fullName:function(){
return this.firstName+" "+this.lastName
}
}
})
</script>