因为微信小程序的原因, 我开始学习vue框架. vue的响应式模板语法真的很让我惊喜(虽然确实是一种已经很久的模式了).
vue的中文文档在这里
使用vue框架最简单的方式就是写一个HTML页面然后引用vue.js啦. 使用 标签就可以将vue.js导入并且使用它来构建vue app了.
这种方法是官方建议的, 像我这种新手当然也是使用这种方案的啦.
相关链接
{{}}
双大括号绑定内容(类似于innerHtml
) v-bind
绑定属性 (el: v-bind:style="variable"
)v-on
绑定事件 (el: v-on:click="onClick"
)v-if
条件渲染 (el: v-if="bool"
) <ul id="example">
<li v-for="(item, index) in items">{{ index }} - {{ item.message }}
li>
ul>
v-model
输入数据绑定 <input v-model="model">
<p>Message is: {{ model }}p>
如果要使用vue的”插值语法”和vue的种种api, 则必须在HTML的js代码中建立vue实例.
模板如下:
var app = new Vue({
el: '#app', //vue实例的承载元素
data: {}, //数据
method: {}, //方法
computed: {}, //计算属性. 当插值时使用的数据需要过于繁琐的计算时, 使用计算属性.
/*
生命周期钩子, 详见vue的文档
*/
});
生命周期函数钩子
vue-cli是个node的模块, 所以想要使用vue-cli, 首先需要配置node运行环境, 然后再使用npm安装vue-cli.
vue init webpack project-name
npm install --sava
vue run dev
webpack
<template>
template>
<script>
//Javascript代码
script>
<style scoped>
//CSS代码, 使用scoped属性能将这段style代码限制在此组件内部而不会影响外部
style>
在node中, 一个js文件就是一个模块, 使用 import
导入模块而使用 export
导出模块. 在vue中, 一个vue文件即包含了这个组件的view和controller, 而对于javascript来说, 这个vue文件就是一个js模块. 因此, 应该使用export
导出这个组件的对象实例, 这样才能在外部导入这个组件.
构造一个对象的实例和构造一个vue实例是类似的, 都 需要指定html中的"承载元素"和 data等等属性.
export default {
el:'#component',
data: function(){
return somedData; //注意, 一个组件的data应该是一个函数对象并且使用return返回data对象
}
method: function(){} //somefunction
}
父组件->子组件
父组件传数据给子组件需要两步操作
//子组件:
<template>
<div>
<div>{{someText}}div>
<div v-bind:style="{color : colorCode}">This font-color should be setted by parentdiv>
div>
template>
<script>
export default {
data(){
return {
someText: "text"
}
}
props: {
colorCode: String //使用props声明子组件需要的数据(属性), msg是属性的"name", String用来指定msg值的类型
}
}
script>
//父组件:
<template>
<div>
<child v-bind:colorCode="#00aaff">child>
div>
template>
<script>
export default {
data: ()=>{},
component:{
child: require('componenets/child.vue')
}
}
script>
export
导出
- 子组件捕获事件, 子组件处理
- 父组件捕获事件, 父组件处理
- 子组件捕获事件, 父组件处理
- 父组件捕获事件, 子组件处理
前两种的事件处理直接在script里将事件”消费”掉即可; 而后两种则需要使用不同的方式分别处理.
- 子组件到父组件
使用”事件发射器(emit)”, 子组件捕获事件并将其”发射”给父组件, 由父组件处理
- 父组件到子组件
在 vue 1 中, 有 dispatch()
和 broadcast()
将父组件的事件分发给子组件, 而在 vue 2 中, 上述两个方法已经被弃用, 取而代之的是状态管理层Vuex. 详见
//子组件
<template>
<div>
<input type="text" v-model="msg" v-on:change="onInput">
div>
template>
<script>
export default{
data(){
return {
msg: '请输入值'
}
},
methods: {
onInput: function () {
if (this.msg.trim()) {
this.$emit('customedEvent', this.msg); //第一个参数是"发射"给父组件的事件名称, 第二个参数是事件的附加参数.
}
}
}
}
script>
//父组件
<template>
<div>
<child v-on:customedEvent="recieveMessage">child>
div>
template>
<script>
export default{
components: {
child: require('components/child.vue'),
},
methods: {
recieveMessage: function (text) {
alert(text);
}
}
}
script>
1. 每一个组件的最外层只能有一个根元素(template不是一个元素)