vue快速上手
2018-11-04 本文已影响15人
labi3285
vue是一个基于响应式编程思想、模块化设计实现的js框架，可以大大简化开发，是前端开发的首选框架。
1、基础语法
下面这个demo演示了vue的基本使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<!-- 这个是国内的vue cdn库 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 插值 -->
<div>{{ test_message }}</div>
<!-- 插值html模板 -->
<div v-html="test_vhtml"></div>
<!-- 遍历 -->
<div>
<li v-for="user in test_users">
{{ user.name }}, {{ user.age }} years old.
</li>
<li style="list-style: none" v-for="(user, i) in test_users" :key="i">
{{ i }}: {{ user.name }}, {{ user.age }} years old.
</li>
</div>
<!-- 插值方法 -->
<div>{{ test_func() }}</div>
<!-- 计算 -->
<div>1 + 2 = {{ 1 + 2 }}</div>
<div>{{ test_bool ? "YES" : "NO" }}</div>
<!-- 条件分支 -->
<div v-if="test_bool">see me if test_bool is true</div>
<div v-else>see me if test_bool is false</div>
<!-- 绑定值 -->
<div v-bind:id="'xxx' + test_bind_id">a h1 with id xxx-{{ test_bind_id }}</div>
<a v-bind:href="test_url">a baidu link</a><br/>
<!-- 简写形式 -->
<div :id="'xxx' + test_bind_id">a h1 with id xxx-{{ test_bind_id }}</div>
<a :href="test_url">a baidu link</a><br/>
<!-- 绑定事件 -->
<button v-on:click="test_click">a button</button><br/>
<button v-on:click="test_click_count += 1">a button</button><span>{{ test_click_count }}</span><br/>
<!-- 事件细节 -->
<button v-on:click.once="test_click">a once click button</button><br/>
<input v-on:keyup.enter="test_summit" placeholder="tap enter to summit"><br/>
<!-- 简写形式 -->
<button @click="test_click">a button</button><br/>
<!-- 双向绑定 -->
<input v-model="test_input_value"><span>{{ test_input_value }}</span><br/>
<!-- 多选绑定 -->
<input type="checkbox" id="check_a" value="a" v-model="test_options"><label for="check_a">A</label>
<input type="checkbox" id="check_b" value="b" v-model="test_options"><label for="check_b">B</label>
<input type="checkbox" id="check_c" value="c" v-model="test_options"><label for="check_c">C</label>
<label>{{ test_options }}</label><br />
<!-- 列表绑定 -->
<select v-model="test_select">
<option value="">choose</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<label>{{ test_select }}</label><br/>
<!-- 绑定样式 -->
<div v-bind:style="{ color: test_color }">test style</div>
<div v-bind:class="{ test_class_active: test_bool }">test class</div>
<!-- 过滤器 -->
<div v-bind:id="'id-' + test_bool | test_filter_bool">a div with id id-{{ test_bool | test_filter_bool }}</div>
<div>{{ test_message }} -> {{ test_message | test_filter_upcase }}</div>
<!-- 监听器 -->
<input v-model="test_money_dollar"><span>{{ test_money_yuan }}¥</span><br />
</div>
<style>
.test_class_active {
color: green;
}
.test_class_disable {
color: gray;
}
</style>
<script>
new Vue({
el: '#app',
data: {
test_message: "a test message",
test_color: "#ff0000",
test_vhtml: "<h5>a h5</h5>",
test_bool: true,
test_click_count: 0,
test_money_yuan: 0,
test_money_dollar: 0,
test_users: [
{ name: 'Tom', age: 12 },
{ name: 'Helen', age: 11 },
{ name: 'Jack', age: 13 }
],
test_options: [],
test_select: "",
test_bind_id: 1,
test_url: "https://www.baidu.com",
test_input_value: "the input text"
},
filters: {
test_filter_upcase: function (value) {
if (!value) return ''
value = value.toString()
return value.toUpperCase()
},
test_filter_bool: function (value) {
if (value.booleanValue) {
return "true"
} else {
return "false"
}
}
},
watch: {
test_money_dollar: function (value) {
this.test_money_yuan = value * 6
}
},
methods: {
test_func: function () {
return "test_func(): " + this.test_message;
},
test_click: function () {
alert("test_click()")
},
test_summit: function () {
alert("test_summit()")
}
}
})
</script>
</body>
</html>
2、模块化
a、注册组件
<div id="app">
<!-- 引用 -->
<test_component_01></test_component_01>
<test_component_02></test_component_02>
</div>
<script>
// 注册全局组件
Vue.component('test_component_01', {
template: '<div>test component 01</div>'
})
// app实例
new Vue({
el: '#app',
// 注册局部组件
components: {
'test_component_02': {
template: '<div>test component 02</div>'
}
}
})
</script>
b、模块间传值(父 --> 子)，变量绑定及声明
<div id="app">
<input v-model="parent_text"><br/>
<!-- ② 绑定变量 -->
<child v-bind:text_from_parent="parent_text"></child>
</div>
<script>
Vue.component('child', {
// ① 声明变量
props: ['text_from_parent'],
template: "<span>{{ text_from_parent }}</span>"
})
new Vue({
el: '#app',
data: {
parent_text: "parent text"
}
})
</script>
props后面的参数也可以以map的形式提供，以实现参数限定，例如：
props: {
varA: Number,
varB: [String, Number],
varC: {
type: Number,
required: true,
default: 1
},
varD: {
validator: function (value) {
return value > 10
}
}
}
c、模块间传值(子 --> 父)，事件监听
<div id="app">
<div>{{ count }}</div>
<!-- ② 注册事件监听 -->
<child v-on:update="childRespondUpdate"></child>
</div>
<script>
Vue.component('child', {
template: '<button v-on:click="onClick">click me to change parent</button>',
data: function () {
return {
count: 0
}
},
methods: {
onClick: function () {
this.count += 1
// ① 在子控件更新的方法中，触发事件
this.$emit('update', this.count)
}
},
})
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
// ③ 执行更新
childRespondUpdate: function (value) {
this.count = value
}
}
})
</script>
3、路由（router）
路由是vue的一个页面切换组件，基本使用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Router Demo</title>
<!-- 这个是国内的vue cdn库 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- vue router库 -->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<!-- 普通链接 -->
<router-link to="/a">a-path</router-link>
<router-link to="/b">b-path</router-link>
<br/>
<!-- 通过名字访问 -->
<router-link v-bind:to="{ name:'a' }">a-name</router-link>
<router-link v-bind:to="{ name:'b' }">b-name</router-link>
<br/>
<!-- 带参数 -->
<router-link v-bind:to="{ path:'/a', query: { param: 'value' } }">a-param</router-link>
<router-link v-bind:to="{ path:'/b', query: { param: 'value' } }">b-param</router-link>
<br/>
<!-- 指定tag类型 -->
<router-link to="/a" tag="button">a-tag</router-link>
<router-link to="/b" tag="button">b-tag</router-link>
<br/>
<!-- router区域 -->
<router-view></router-view>
</div>
<script>
// 创建router
const router = new VueRouter({
routes: [
{ path: '/a', name: 'a', component: { template: '<div>A</div>' } },
{ path: '/b', name: 'b', component: { template: '<div>B</div>' } },
{ path: '/a/b', name: 'c', component: { template: '<div>C</div>' } }
]
})
// 通过router初始化
const app = new Vue({
router: router
})
// 手动挂载
.$mount('#app')
</script>
</body>
</html>
