Vue.js的学习
初始Vue.js
-
什么是Vue.js？
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
-
Vue的特点和高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
安装 Vue （直接官网下载）
Vue初体验
-
入门demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="../js/vue.js"></script> <script> //let 变量 //const 常量 const app = new Vue({ el: '#app', //用于挂载要管理的元素 data: { //定义数据 message: 'Hello Vue' } }); </script> </body> </html>- 首先创建一个Vue对象
- 之后传入了一些options：{}
- {}中包含了el属性：该属性中通常决定了这个Vue对象挂载到哪一个元素上，通常根据标签的id值来选择。
- {}中一般还包括data属性，该属性通常会存储一些数据。
-
列表展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表展示</title> </head> <body> <div id="app"> <table> <ul> <li v-for="movie in movies">{{movie}}</li> </ul> </table> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el: '#app', data:{ message: '', movies: ['钢铁侠','复仇者联盟','绿巨人','雷神'] } }) </script> </body> </html> -
计数器(两种方法)
<body> <div id="app"> <h2>当前计数：{{count}}</h2> <!--<button v-on:click="count++">+</button> <button v-on:click="count--">-</button>--> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el: '#app', data: { count: 0 }, methods: { add:function (){ this.count++ }, sub:function (){ this.count-- } } }) </script> </body>
Vue中的MVVM模式
- MVVM(Model-view-viewmodel)是一种软件架构模式。
- View层:
- 视图层
- 在前端开发中，通常就是DOM层
- 主要作用是给用户展示各种信息
- Model层
- 数据层
- 数据可能是我们前端固定死的数据，但更多的是来自服务器
- ViewModel层
- 视图模型层
- 视图模型是View和Model沟通的桥梁
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反映到View中
- 另一方面它实现了DOM listener，也就是DOM监听，当DOM发生了一些事件(点击，滚动，touch等)时，可以监听到，并在需要的情况下改变对应的data。
Vue的生命周期
插入操作
-
Mustache语法
<body> <div id="app"> <h2>{{message}}</h2> <h2>{{message}},李焕英！</h2> <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式--> <h2>{{firstName + lastName}}</h2> <h2>{{firstName+ ' ' +lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{count * 2}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好！', firstName: '徐', lastName: '大彪', count : 100 } }) </script> </body> -
v-once指令 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变（使用的情况不多）
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> //其后面不用添加东西 </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '哈哈哈' } }) </script> </body> -
v-html 指令
如果服务器请求返回的数据是一个HTML代码，直接使用{{}},则会将HTML代码一起输出，使用v-html指令，指令后面通常跟一个string类型，会将string的HTML代码解析出来并渲染。
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
<body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { url: '<a href="http://www.baidu.com">百度一下</a>' } }) </script> </body> -
v-text指令 和Mustache很相似，但是没有其灵活。
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊！' } }) </script> </body> -
v-pre指令 用于跳过这个元素和它子元素的编译过程。例子中即显示{{message}}
<body> <div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body>
动态绑定属性
-
v-bind的使用 (动态绑定属性)
<body> <div id="app"> <!--错误写法--> <!--<img src="{{imgUrl}}">--> <!--正确做法使用v-bind--> <img v-bind:src="imgUrl" alt=""> <a v-bind:href="URL">百度一下</a> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { imgUrl: 'https://img2.baidu.com/it/u=1708516198,3752712632&fm=26&fmt=auto&gp=0.jpg', URL: 'http://www.baidu.com' } }) </script> </body>v-bind的简写方式：
v-bind:src->:srcv-bind:href->:href -
v-bind动态绑定class属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind动态绑定class</title> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <h2 v-bind:class="{active : isActive}">{{message}}</h2> <button v-on:click="click" >点击变色</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isActive: true }, methods: { click: function (){ this.isActive=!this.isActive } } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind动态绑定class(对象语法)</title> <style> .active{ color: #ff0000; } </style> </head> <body> <div id="app"> <h2 v-bind:class="getClass()">{{message}}</h2> <button v-on:click="click" >点击变色</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isActive: true }, methods: { click: function (){ this.isActive=!this.isActive }, getClass:function (){ return {active : this.isActive} } } }) </script> </body> </html>小练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小练习：在列表中点击一项改变其颜色</title> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <!--index===isIndex 这部分用来判断当前的index跟click方法传入的index是否相同，相同则激活active--> <li v-on:click="click(index)" :class="{active: index === isIndex}" v-for="(movie,index) in movies"> {{index}}--{{movie}}</li> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { movies: ['变形金刚','阿凡达','复仇者联盟','钢铁侠'], isIndex : '' }, methods: { click: function (obj){ this.isIndex=obj } } }) </script> </body> </html> -
v-bind绑定style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind动态绑定style属性</title> <style> .font{ font-size: 50px; color: red; } </style> </head> <body> <div id="app"> <!--第一种方法 value处需要添加单引号''--> <h2 :style="{fontSize:'50px'}">{{message}}</h2> <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', finalSize: 100, finalColor: 'red' } }) </script> </body> </html>
计算属性（computed）
在某些情况下我们可能需要对一些数据进行一些转化后再显示，或者需要将几个数据结合起来进行显示。
- 比如我们有
firstName和lastName两个变量，我们需要显示完整的名称。 - 但是如果我们多个地方都需要显示完整的名称，我们可能就需要写多个
{{firstName}}{{lastName}}
此时我们就可使用计算属性来完成这项任务。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<!--合并两个变量的原始方法-->
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<!--使用计算属性 computed-->
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '徐',
lastName: '大彪'
},
computed:{
fullName(){
return this.firstName+' '+this.lastName
}
}
})
</script>
</body>
</html>
计算属性的复杂操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed的复杂操作</title>
</head>
<body>
<div id="app">
<!--显示所有书的价格的总和-->
<h2>总价格：{{sumPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books:[
{id: 110,name: 'spring从入门到放弃',price: 50},
{id: 111,name: 'mybatis从入门到放弃',price: 60},
{id: 112,name: 'spring boot从入门到放弃',price: 70},
{id: 113,name: 'spring security从入门到放弃',price: 80},
]
},
computed:{
sumPrice(){
let result=0;
for(let i=0;i<this.books.length;i++){
result += this.books[i].price
}
return result;
}
}
})
</script>
</body>
</html>
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
