前段时间回老家办事，也算偷个懒，这周开始接触 Vue ，以及 Vue-router。
一、 Vue
1. 概述
原生 js 要改变页面上的数据，需要两步，先选中 Dom 对象然后修改值，而我们最终目的只是改变页面上的数据，vue可以一步完成，vue 将视图和数据绑定，我们只需要改变数据，页面就会自动刷新。
2. vue 基本用法
之前在 node 里用过 ejs 模板引擎，vue 部分功能和模板引擎很像，也可以在 html 里直接写变量，可以在 html 里写 if 判断和 for 循环。
- 变量赋值
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
- 属性绑定
<span v-bind:title="message"></span> 加上 v-bind 前缀，这里的 message 是个变量
<span title="message"></span> 这里的 message 是个字符串
title 属性：当鼠标移入元素上，显示 title 属性的值。
- if 判断
<p v-if="seen">现在你看到我了</p>
这里的 seen 是个变量，变量值为 true 元素就显示，变量值为 false 元素就不显示
- for 循环
<li v-for="item in items">{{ item }}</li> 循环
- 事件监听
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
var app = new Vue({
el: '#app', // el => element
data: { // 放数据
message: 'Hello Vue.js!'
},
methods: { // 放方法
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
- 双向绑定
一般只有表单元素才会用双向绑定，从视图向数据，从数据向视图。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
<input type="radio" name="sex" value="男" v-model="sex">男
<input type="radio" name="sex" value="女" v-model="sex">女
<input v-if="sex === '女'" type="text" placeholder="请输入三维">
</div>
<script>
// 把视图和数据绑定
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
sex: '男'
}
})
</script>
3. vue 定义组件
之前用 jquery 和 react 都写过一个表格组件，这里用 vue 也写了一个表格组件。
vue写的表格组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id="app" class="container">
<yml-table class="table table-bordered" v-bind:thead="thead" v-bind:tbody="tbody"></yml-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('yml-table', {
props: ['thead', 'tbody'],
template: `
<table>
<thead>
<tr>
<th v-for='item in thead'>{{ item.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for='item in tbody'>
<td v-for='item2 in thead'>{{ item[item2.index] }}</td>
</tr>
</tbody>
</table>
`
})
var app = new Vue({
el: '#app',
data: {
thead: [
{ title: '口红', index: 'kouhong' },
{ title: '手机', index: 'shouji' },
],
tbody: [
{ kouhong: '迪奥', shouji: '小米' },
{ kouhong: '圣罗兰', shouji: '华为' },
{ kouhong: 'ysl', shouji: '苹果' },
]
}
})
</script>
</body>
</html>
二、vue-router
阅读 vue 官方文档的时候，点击左边某个标题，右边会显示该标题对应的文章，用vue-router 可以很方便的实现这个功能。左边标题就相当于 a 标签，点击会改变浏览器地址栏的最后一部分，如下图红框就是路由，右边显示该路由对应页面。
用 vue-router 写的一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>路由</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
display: flex;
height: 100vh;
padding-top: 50px;
}
.left{
width: 5vw;
}
.right{
}ul{
height: 120px;
width: 100%;
text-align: center;
}
li{
list-style: none;
margin-bottom:10px;
width: 100%;
}
router-link{
text-decoration: none;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<ul>
<li>
<router-link to="/pic">图片</router-link>//相当于 <a href="/foo">Go to Foo</a>，跳转链接
</li>
<li>
<router-link to="/mine">简介</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view> // 路由对应的那个组件会替换router-view所在的位置
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const roters = new VueRouter({
routes: [
{ path:'/pic', component:{ template:`<div><h1>这是图片</h1></div>` }},
{ path:'/mine', component:{ template:`<div><h1>这是介绍</h1></div>` }},
]
})
new Vue({
el: '.container',
router: roters
})
</script>
</body>
</html>
网友评论