Vue01
2020-03-27 本文已影响0人
绯书Freebook
目录
1.1.认识Vuejs
- 为什么学习Vuejs
1.vue在国内领域是必备技能。
- Vue的渐进式
1.把vue嵌入现成的应用中，带来更多的交互。也可以使用全家桶(core+Vue-router+Vuex)
- Vue的特点
1.解耦视图和数据
2.可复用组件
3.前端路由
4.状态管理
5.虚拟DOM
1.2. 安装Vue
- cdn引入
<!--开发版本,包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--生产环境版本，优化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 下载和引入
开发：https://vuejs.org/js/vue.js
生产:https://vuejs.org/js/vue.min.js
- npm安装
1.webpack和CLI结合使用
1.3.Vue的初体验
- Hellow Vue
- mustache->vue响应式：当数据发送改变，页面产生响应
<body> <div id="app">{{message}}</div> </body> <script src="vue.js"></script> <script> //let(变量)/const(常量) //编程范式：声明式 const app=new Vue({ el:'#app',//挂载要管理的元素 data:{//定义和存储数据 message:‘你好’ } })
//命令编程
</script>
```
- Vue列表展示
- v-for
- 后面给数组追加元素的时候，新的元素也可以在界面中渲染出来
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'app',
data:{
movies:['星际争霸','大哼传奇','Π']
}
})
app.movies.push('海王')
</script>
</body>
- Vue计数器小案例
-事件监听：click->methods
<body>
<div id="app">
<h2>当前计算：{{counter}}</h2>
<button @click="add">+</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'app',
data:{
counter:0;
},methods:{
add:()=>{
this.counter++
}
}
})
</script>
</body>
1.4. Vue中的MVVM
MVVM
MVVM的解释
MVVM的代码分布
1.5创建Vue时的options
- el:
1.类型：string|HTMLElement
2.作用：决定Vue管理那个DOM - data:
1.类型：Object|Function（data必须是函数）
2.作业：Vue的数据对象 - methods:
1.类型：{[key:string]:Funtion}
2.作用：定义Vue方法 - 生命周期函数：
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数
据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在
这个过程中也会运行一些叫做生命周期钩子的函数。 -
二. 插值语法
- mustache语法
<body>
<div id="app">
<!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2>当前计算：{{counter*2}} {{counter+' '+counter}}</h2>
<button @click="add">+</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'app',
data:{
counter:0;
},methods:{
add:()=>{
this.counter++
}
}
})
</script>
</body>
- v-once
- 表达元素和组件只渲染一次。不随数据变化而变化。
- v-html
1.会把string的html解析并渲染出来。
<div id="app">
<h2 v-html="link"></h2>
</div>
<script>
let app=new Vue({
el:"#app",
data:(){
link:"<a href="#">百度</a>
}
})
</script>
- v-text
1.一般只接受一个string类型 - v-pre({})
- v-cloak:斗篷
三. v-bind
3.1.v-bind绑定基本属性
- v-bind:绑定一个或多个属性，或向另一个组件传递props值
- :href
3.2. v-bind动态绑定class
- 对象语法：:class='{类名：boolean，类名：true}'
<body>
<div id="app">
<h2 :class=“{active：isActive,line:isLine}”>{{mes}}</h2>
<button :click="btnClick"></button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
mes:'你好’，
isActive：true，
isLine：true
},
methods:{
btnclick:()=>{
this.isActive=!this.isActive;
}
}
})
</script>
</body>
- 数值语法:
<!--不加' '解析data，加' '变为字符串-->
v-bind:class="[active,line]"
*v-bind与v-for结合的作业
3.3.v-bind动态绑定style
- 对象语法
- 数组语法
四.计算属性
- 案例一：firstName+lastName
- 案例二：books->price
