网页前端胡乱入门
上了《BS体系软件设计》这门课,最终决定用 Django + Vue 的架构完成课程设计。
不要说 Vue 了,js 和 css 我都一知半解,于是决定开坑速成。
vue 的基本函数
v-bind
属性绑定:<a v-bind:href="url"> ... </a>
- 也可以动态地绑定一个类
v-bind:class="{‘textColor‘:isColor}
- 因为很常用,可以完全省略这个词。
- 也可以动态地绑定一个类
v-if
条件语句:v-if="seen"
- 后面可以接
v-else
,v-else-if
- 后面可以接
v-on
事件绑定:<button v-on:click="myclick">click me</button>
- 可以绑定多个:
<v-on="{mouseenter:onenter,mouseleave:leave}">
- 可以用
@
来简写。
- 可以绑定多个:
v-model
在一些表单控件元素上创建双向数据绑定<input v-model="message">
一开始显示 message 内容,message 也会绑定用户输入。
v-for
循环语句:<li v-for="site in sites">
- 也可以迭代字典(第三个表示索引)
<li v-for="(value, key, index) in object">
- 也可以直接循环整数
<li v-for="n in 10">
- 也可以迭代字典(第三个表示索引)
- 过滤操作
- 调用:
{{ message | capitalize }}
和<div v-bind:id="rawId | formatId"></div>
- 注意 vue 里定义的是
filter
- 调用:
Vue 应用
-
computed
和method
功能相同,前者会利用缓存,而后者每次渲染时会重新计算。 -
watch
监听相应数据的变化1
2
3vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
}); -
v-model
支持多个绑定,会以数组的形式呈现。1
2
3
4
5
6
7
8<p>多个复选框:</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<!-- 选择的值为: [ "Runoob", "Taobao", "Google" ] -->
Vue 组件
- 组件系统让我们可以用独立可复用的小组件来构建大型应用。
- 全局组件
- 用
Vue.component(tagName, options)
定义 - 用
<tagName></tagName>
调用
- 用
- 局部组件:在 Vue 创建时开一个
components
关键词。- prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
1
2
3
4
5
6
7
8
9
10<div id="app">
<child message="hello!"></child>
</div>
<script>
Vue.component('child', {
// 声明 props
props: ['message'], // 可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
</script> - 在调用组件的时,可以用
v-on
把组件 emit 出来的返回值当做事件绑定到其他属性值1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// 使用
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
// 定义组件
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
</script> - 注意到上述代码的 data 里返回的是函数。如果返回的是对象,不同调用者会共享。
- prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.