VUE
2022-03-07 19:12:12 33 举报AI智能生成
自学VUE
作者其他创作
大纲/内容
样式绑定
<div v-bind:class="{'active': isActive}"></div>
v-bind:class="{'active': isActive, 'text-danger': hasError}">
<div v-bind:class="classObject"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[errorClass,isActive?activeClass:'']"></div>
<div v-bind:style="{color: activeColor,fontSize: fontSize+'px'}">菜鸟教程</div>
<div v-bind:style="styleObject">菜鸟教程</div>
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
事件绑定
表单
组件
组件（Component）是Vue.js最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
父子组件传值
props: ['aaa'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ aaa }}</span>'
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ aaa }}</span>'
不能使用data里的值做传值
要使用父UI里绑定的值做
要使用父UI里绑定的值做
注意: 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
局部组件
创建局部组件
components:{
//<runoob>将只在父模板可用
'runoob': Child
}
components:{
//<runoob>将只在父模板可用
'runoob': Child
}
全局组件
注册全局组件：
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
所有实例都能用全局组件。
tagName为组件名，options为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
<tagName></tagName>
分支主题
模版
文本
<p>{{ message }}</p>
html
<div v-html="message"></div>
属性
<div v-bind:class="{'class1': use}">
js表达式
{{ message.split('').reverse().join('') }}
指令【条件】
<p v-if="seen">现在你看到我了</p>
参数
<pre><a v-bind:href="url">菜鸟教程</a></pre>
<a v-on:click="doSomething">
修饰符
修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
用户输入
<input v-model="message">
v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<button v-on:click="reverseMessage">反转字符串</button>
按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应。
过滤器
Vue.js允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示,格式如下：
过滤器函数接受表达式的值作为第一个参数。
过滤器函数接受表达式的值作为第一个参数。
{{message|capitalize}}
<div v-bind:id="rawId|formatId"></div>
过滤器可以串联：
{{ message | filterA | filterB }}
{{ message | filterA | filterB }}
过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
{{ message | filterA('arg1', arg2) }}
缩写
v-bind缩写
<a :href="url"></a>
<a :href="url"></a>
v-on缩写
<a @click="doSomething"></a>
<a @click="doSomething"></a>
条件语句
<p v-if="seen">现在你看到我了</p>
<div v-else>
<div v-else-if="type === 'C'">
<h1 v-show="ok">Hello!</h1>
循环语句
迭代list
<template v-for="site in sites">
<template v-for="site in sites">
v-for 可以通过一个对象的属性来迭代数据【迭代dict value】：
<li v-for="(value,key) in object"> 【迭代dict key：value】
<li v-for="(value, key, index) in object">【迭代key，value，index】
<li v-for="n in 10"> 迭代整数【1-n】
计算属性
计算属性关键词:computed。【动态属性】
计算属性在处理一些复杂逻辑时是很有用的。
计算属性在处理一些复杂逻辑时是很有用的。
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
我们可以使用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。
可以说使用computed性能会更好，但是如果你不希望缓存，你可以使用methods属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
监听属性
通过watch来响应数据的变化。
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
nval为变化后，oval为变化前
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
nval为变化后，oval为变化前
0 条评论
下一页
