对于VUE对象,基本结构如下
- el 挂载点,用于挂载Vue实例
- data 用于存放数据
- methods 用于存放方法
以上三者最为常用,除此以外还有computed, watch, filters等;
1 2 3 4 5 6 7 8 9 10 11
| <div id="app"> {{ message }} </div>
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
|
el 属性又称挂载点,可认为是 element 的简写,创建一个 vue实例 得知道是在哪一块元素上创建 Vue实例 ,对哪一块视图进行操作。
在这里,我们创建了一个 Vue 实例,并将其在el中挂载到一个元素上。这里的挂载元素是 #app,其中和css中类似, #绑定的是id, .绑定的是class
data用于Vue 实例中的数据。在这个例子中,我们定义了一个 data 对象,其中包含一个 message 属性,其值为 ‘Hello Vue.js!’。
在模板中,我们使用双大括号语法表示数据绑定,使用来输出message属性的值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令-内容渲染指令</title> </head> <body>
<div id="app"> <p v-text="name">my name is ...</p> <p>{{ gender }}</p> <p v-html="info"></p> </div> </body>
<script src="../lib/vue-2.6.12.js"></script>
<script> const vm = new Vue({ el: '#app', data: { name: 'lucien', gender: 'male', info: '<h4 style="color: red"> 欢迎使用 vue...<h4>' } }) </script> </html>
|
Vue基本命令
绑定,事件处理和渲染
绑定
Vue有两种数据绑定的方式:
- 单向绑定(v-bind):数据只能从data流向页面。
- 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
另外
- 双向绑定一般都应用在表单类元素上(如input等)
- v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。
简写
- v-bind
1 2 3 4 5 6 7 8 9 10 11
| <a v-bind:href="url"></a>
<a :href="url"></a>
<button v-bind:disabled="someDynamicCondition">Button</button>
<button :disabled="someDynamicCondition">Button</button>
|
- v-on
1 2 3 4 5
| <a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
|
使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>数据绑定</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root">
单向数据绑定:<input type="text" :value="name"><br /> 双向数据绑定:<input type="text" v-model="name"><br />
</div> </body>
<script type="text/javascript"> Vue.config.productionTip = false
new Vue({ el: '#root', data: { name: 'hkk' } }) </script> </html>
|
事件处理
vm即Vue实例,这里的事件或者说行为是类似Click等用户行为触发的事件,事件处理就是Vue调用与该事件相关联的事件处理函数;
- 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
- 事件的回调需要配置在methods对象中,最终会在vm上;
- methods中配置的函数,不要用箭头函数!否则this就不是vm,而是Window;
- methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
- @click=”demo” 和 @click=”demo($event)” 效果一致,但后者可以传参(demo是methods中的一个名为 demo 的方法);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <template> <button @click="handleClick">点击我</button> </template>
<script> export default { name: "MyComponent", methods: { handleClick(event) { console.log("事件对象:", event); console.log("事件类型:", event.type); console.log("事件触发的元素:", event.target); }, }, }; </script>
|
修饰符
exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
1 2 3 4 5 6 7 8
| <!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
|
鼠标按钮修饰符
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
prevent:阻止默认事件(常用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| data: { user: {} } <!-- 修饰符用于指出一个指令应该以特殊方式绑定。 这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault(): 即阻止表单提交的默认行为 --> <form action="save" v-on:submit.prevent="onSubmit"> <label for="username"> <input type="text" id="username" v-model="user.username"> <button type="submit">保存</button> </label> </form>
methods: { onSubmit() { if (this.user.username) { console.log('提交表单') } else { alert('请输入用户名') } } }
|
在默认情况下,表单提交会导致浏览器重新加载页面或者向服务器发送请求,我们可以阻止这种默认行为,在 v-on 指令后面添加 .prevent 修饰符。这告诉 Vue.js 在触发事件时调用 event.preventDefault() 方法来阻止默认行为。
在上面,当用户点击“保存”按钮时,onSubmit 方法会被调用。也就是“覆盖”了默认的提交方法。
条件渲染
v-if:条件指令,用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。表达式可以是
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <script> var vue = new Vue({ "el":"#div0" data:{ num:1 } }); </script> <body> <div id="div0"> <div v-if="num%2==0" style="width:200px;heigth:200px;background-color:chartreuse;"> 这里的v-if表示若偶数,则启用该标签,若不成立则该标签无效 </div>
|
假设我们正在开发一个电子商务网站,该网站允许用户筛选商品并按价格排序。我们可以使用 v-if 来渲染不同的商品列表,以响应用户的不同筛选条件。
例如,我们可以在页面上放置多个按钮,每个按钮都对应着一个不同的筛选条件。当用户点击某个按钮时,我们可以使用 v-if 来决定渲染哪个商品列表。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
| <template> <div> <button @click="sortByPrice">按价格排序</button> <button @click="sortByRating">按评分排序</button> <button @click="showAllProducts">显示全部商品</button>
<div v-if="sortBy === 'price'"> <h2>按价格排序的商品列表</h2> <ul> <li v-for="product in sortedProductsByPrice" :key="product.id"> {{ product.name }} - {{ product.price }} </li> </ul> </div>
<div v-if="sortBy === 'rating'"> <h2>按评分排序的商品列表</h2> <ul> <li v-for="product in sortedProductsByRating" :key="product.id"> {{ product.name }} - {{ product.rating }} </li> </ul> </div>
<div v-if="sortBy === 'all'"> <h2>所有商品列表</h2> <ul> <li v-for="product in products" :key="product.id"> {{ product.name }} - {{ product.price }} </li> </ul> </div> </div> </template>
<script> export default { data() { return { products: [ { id: 1, name: '商品A', price: 50, rating: 4.5 }, { id: 2, name: '商品B', price: 80, rating: 3.8 }, { id: 3, name: '商品C', price: 100, rating: 4.9 }, ], sortBy: 'all', }; }, computed: { sortedProductsByPrice() { return this.products.slice().sort((a, b) => a.price - b.price); }, sortedProductsByRating() { return this.products.slice().sort((a, b) => b.rating - a.rating); }, }, methods: { sortByPrice() { this.sortBy = 'price'; }, sortByRating() { this.sortBy = 'rating'; }, showAllProducts() { this.sortBy = 'all'; }, }, }; </script>
|
v-else:可以使用 v-else 为 v-if 添加一个“else 区块”。一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别。
1 2 3 4
| <button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
|
v-else-if:
v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用,和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
1 2 3 4 5 6 7 8 9 10 11 12 13
| <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
|
另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样:v-if类似,但是if的原理是若不成立,则整个div消失,而show只是让div的display属性修改为隐藏none,是通过样式改变的。
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好。
列表渲染
v-for:列表循环指令
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <ul> <li v-for="n in 10">{{ n }} </li> </ul> <ul> <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li> </ul> > data: { userList: [ { id: 1, username: 'helen', age: 18 }, { id: 2, username: 'peter', age: 28 }, { id: 3, username: 'andy', age: 38 } ] }
<table border="1"> <tr v-for="(item, index) in userList"> <td>{{index}}</td> <td>{{item.id}}</td> <td>{{item.username}}</td> <td>{{item.age}}</td> </tr> </table>
|
template
在 Vue.js 中,template 是 Vue.js 组件的一部分,它可以包含 HTML 元素、Vue.js 指令、Vue.js 表达式、Vue.js 组件等内容。通过在 template 中定义这些内容,我们可以构建出应用程序中的各种视图。
以下是一个简单的 Vue.js 组件示例,其中包含了一个 template:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <template> <div> <h1>{{ greeting }}</h1> <p>{{ message }}</p> </div> </template>
<script> export default { data() { return { greeting: 'Hello', message: 'Welcome to my website!', }; }, }; </script>
|
在这个示例中,我们定义了一个包含两个元素的 template,它们分别用于渲染一个标题和一个段落。通过使用 Vue.js 的双花括号语法,我们可以将 greeting 和 message 数据绑定到 HTML 元素中,从而实现动态渲染。或者说,通过template,我们能在vue文件中编写html。
组件
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
使用components定义组件。
1 2 3 4 5 6 7 8 9 10
| var app = new Vue({ el: '#app', components: { 'Navbar': { template: '<ul><li>首页</li><li>学员管理</li></ul>' } } })
|
使用
1 2 3
| <div id="app"> <Navbar></Navbar> </div>
|
全局组件
1 2 3 4 5 6 7 8 9 10 11 12
| Vue.component('Navbar', { template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>' }) <div id="app"> <Navbar></Navbar> </div> <script src="vue.min.js"></script> <script src="components/Navbar.js"></script> <script> var app = new Vue({ el: '#app' }) </script>
|
路由
常用于点击菜单内容切换
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用,路由需要载入 vue-router 库
1 2
| <script src="vue.min.js"></script> <script src="vue-router.min.js"></script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/">首页</router-link> <router-link to="/student">会员管理</router-link> <router-link to="/teacher">讲师管理</router-link> </p> <router-view></router-view> </div>
<script> const Welcome = { template: '<div>欢迎</div>' } const Student = { template: '<div>student list</div>' } const Teacher = { template: '<div>teacher list</div>' } const routes = [ { path: '/', redirect: '/welcome' }, { path: '/welcome', component: Welcome }, { path: '/student', component: Student }, { path: '/teacher', component: Teacher } ] const app = new Vue({ el: '#app', router }) </script>
|
axios
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| var app = new Vue({ el: '#app', data: { memberList: [] }, created() { this.getList() }, methods: { getList(id) { axios.get('http://localhost:8081/admin/ucenter/member') .then(response => { console.log(response) this.memberList = response.data.data.items }) .catch(error => { console.log(error) }) } } })
<div id="app"> <table border="1"> <tr> <td>id</td> <td>姓名</td> </tr> <tr v-for="item in memberList"> <td>{{item.memberId}}</td> <td>{{item.nickname}}</td> </td> </tr> </table> </div>
|
首先,我们使用 new Vue() 创建一个 Vue.js 实例,并将其绑定到网页中的一个元素(在本例中是 id 为 app 的 div 元素)。在 data 选项中,我们定义了一个空数组 memberList,它将用于存储从服务器获取的数据。
在 created 钩子函数中,我们调用了 getList 方法,它会向服务器发送一个 GET 请求,并使用 axios 库来处理这个请求。如果请求成功,axios 库会返回一个包含响应数据的对象,并触发 then 回调函数。在这个回调函数中,我们使用 response.data 属性来获取服务器返回的数据,并将它赋值给 memberList 数组。如果请求失败,axios 库会触发 catch 回调函数,在这个函数中我们简单地输出了错误信息。
在网页中,我们使用 Vue.js 的 v-for 指令来循环遍历 memberList 数组,并将每个元素显示在一个表格行中。使用双花括号语法,我们将 item 对象的 memberId 和 nickname 属性绑定到 HTML 元素中,从而实现动态渲染。