指令(Directives)
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* 概要 [#p03a7fc5]
下面的各标签属性，可以使用模板字符串的方式进行标签属性数...
例：
<img :src="baseUrl + imgUrl">
* v-if [#f3b0d28b]
可以控制 br 标签是否显示。
#codeprettify{{
<br v-if="total == 0" />
}}
#codeprettify{{
<p v-if="true">Now you see me</p>
}}
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面...
#codeprettify{{
<p v-if="true">Now you see me</p>
<p v-else>CanSee</p>
}}
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更...
* v-bind [#b67028d4]
用于绑定 html 属性
:disabled 绑定的例子：他支持一个单一 JavaScript 表达式 （...
#codeprettify{{
<el-button
class="filter-item"
size="t1 + t2"
type="primary"
icon="el-icon-plus"
:disabled="objSomething == null || canEdit ==...
@click="doSomething"
>add</el-button
>
<div id="app">
<p v-bind:title="title">html属性不能使用双大括号形式...
</div>
......
var vm = new Vue({
el: '#app',
data: {
title: 'title content'
}
});
}}
** 执行运算 [#u67eda75]
#codeprettify{{
<div id="app">
<p v-bind:title="t1 + ' ' + t2">html属性不能使用双大...
</div>
......
var vm = new Vue({
el: '#app',
data: {
t1: 'title1',
t2: 'title2'
}
});
}}
** 执行函数等 [#he4e91a0]
#codeprettify{{
<div id="app">
<p v-bind:title="getTitle()">html属性不能使用双大括号...
</div>
......
var vm = new Vue({
el: '#app',
data: {
getTitle: function () {
return 'title content';
}
}
});
}}
* v-show [#bb47cd34]
如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-s...
&color(red){v-show的机制是加载后，根据条件判断是否显示};
#codeprettify{{
<p v-show="true">Now you see me</p>
}}
注意：v-if有更高的切换开销~
v-show有更高的初始渲染开销。~
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行...
* v-for [#c0acddd2]
v-for 指令需要以 item in list 形式的特殊语法， list 是源...
#codeprettify{{
<p v-for="(item,index) in list">Index:\{\{index\}\} - Ite...
}}
#codeprettify{{
<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>
}}
#codeprettify{{
export default {
data () {
return {
list: [1,2,3]
}
}
}
}}
也可以用of代替in做为分隔符，因为它是接近JavaScript迭代器...
#codeprettify{{
<ul id="exp1">
<li v-for="value in object">
\{\{value\}\}
</li>
</ul>
}}
** img标签动态绑定src [#b1ca6685]
#codeprettify{{
<ul v-for="i in product" class="clear">
<li>
<img :src="i.src"/>
</li>
<li>
<button>立即购买</button>
</li>
<br />
</ul>
}}
注意：此处的绑定，数据写成 :src="｛｛i.src｝｝",是错误的...
** component lists rendered with v-for should have explic...
缺少 :key="index"
#codeprettify{{
<el-row :gutter="20" v-for="(item, index) in data" :key="...
<el-col :md="8">
<span> {\{ item.id \}\}</span>
</el-col>
<el-col :md="8">
<span> {\{ item.name }\}</span>
</el-col>
<el-col :md="8">
<span> {\{ item.age }\}</span>
</el-col>
</el-row>
}}
* Vue 中的 v-model 和 ：model 的区别 [#r8249532]
** v-model 所需要绑定的值，需要经过加工后才可以绑定使用的...
在 data 里面定义一个临时值，例如下面的 temp
#codeprettify{{
data: {
return {
temp: [], //为了对绑定源数据加工，做的临时变量
bindingSource: [], //绑定源数据
}
}
}}
在 watch 里面对绑定值进行加工
#codeprettify{{
watch: {
temp: {
handler(newVal, oldVal) {
var result;
//在这里对 bindingSource 进行任意的加工后，用 temp ...
return result;
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true,
}
}}
html里面绑定
#codeprettify{{
<el-form-item label="生产工序">
<el-checkbox-group v-model="temp" ....
}}
** v-model [#x388c58c]
是 vue 中的 双向数据绑定 指令， 是负责监听用户输入事件以...
(即只对表单控件标签的数据双向绑定有效)。
它并不会向子组件传递数据
- v-model 在内部为不同的输入元素使用不同的属性并抛出不同...
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
** :model [#m7bdee14]
: model 是 v-bind：model 的 简写
除引用类型外 都是单向数据传递 ， 父组件传递到了子组件。
引用类型（funcrtion ,array, object ）:子组件改变引用类型...
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
* 概要 [#p03a7fc5]
下面的各标签属性，可以使用模板字符串的方式进行标签属性数...
例：
<img :src="baseUrl + imgUrl">
* v-if [#f3b0d28b]
可以控制 br 标签是否显示。
#codeprettify{{
<br v-if="total == 0" />
}}
#codeprettify{{
<p v-if="true">Now you see me</p>
}}
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面...
#codeprettify{{
<p v-if="true">Now you see me</p>
<p v-else>CanSee</p>
}}
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更...
* v-bind [#b67028d4]
用于绑定 html 属性
:disabled 绑定的例子：他支持一个单一 JavaScript 表达式 （...
#codeprettify{{
<el-button
class="filter-item"
size="t1 + t2"
type="primary"
icon="el-icon-plus"
:disabled="objSomething == null || canEdit ==...
@click="doSomething"
>add</el-button
>
<div id="app">
<p v-bind:title="title">html属性不能使用双大括号形式...
</div>
......
var vm = new Vue({
el: '#app',
data: {
title: 'title content'
}
});
}}
** 执行运算 [#u67eda75]
#codeprettify{{
<div id="app">
<p v-bind:title="t1 + ' ' + t2">html属性不能使用双大...
</div>
......
var vm = new Vue({
el: '#app',
data: {
t1: 'title1',
t2: 'title2'
}
});
}}
** 执行函数等 [#he4e91a0]
#codeprettify{{
<div id="app">
<p v-bind:title="getTitle()">html属性不能使用双大括号...
</div>
......
var vm = new Vue({
el: '#app',
data: {
getTitle: function () {
return 'title content';
}
}
});
}}
* v-show [#bb47cd34]
如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-s...
&color(red){v-show的机制是加载后，根据条件判断是否显示};
#codeprettify{{
<p v-show="true">Now you see me</p>
}}
注意：v-if有更高的切换开销~
v-show有更高的初始渲染开销。~
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行...
* v-for [#c0acddd2]
v-for 指令需要以 item in list 形式的特殊语法， list 是源...
#codeprettify{{
<p v-for="(item,index) in list">Index:\{\{index\}\} - Ite...
}}
#codeprettify{{
<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>
}}
#codeprettify{{
export default {
data () {
return {
list: [1,2,3]
}
}
}
}}
也可以用of代替in做为分隔符，因为它是接近JavaScript迭代器...
#codeprettify{{
<ul id="exp1">
<li v-for="value in object">
\{\{value\}\}
</li>
</ul>
}}
** img标签动态绑定src [#b1ca6685]
#codeprettify{{
<ul v-for="i in product" class="clear">
<li>
<img :src="i.src"/>
</li>
<li>
<button>立即购买</button>
</li>
<br />
</ul>
}}
注意：此处的绑定，数据写成 :src="｛｛i.src｝｝",是错误的...
** component lists rendered with v-for should have explic...
缺少 :key="index"
#codeprettify{{
<el-row :gutter="20" v-for="(item, index) in data" :key="...
<el-col :md="8">
<span> {\{ item.id \}\}</span>
</el-col>
<el-col :md="8">
<span> {\{ item.name }\}</span>
</el-col>
<el-col :md="8">
<span> {\{ item.age }\}</span>
</el-col>
</el-row>
}}
* Vue 中的 v-model 和 ：model 的区别 [#r8249532]
** v-model 所需要绑定的值，需要经过加工后才可以绑定使用的...
在 data 里面定义一个临时值，例如下面的 temp
#codeprettify{{
data: {
return {
temp: [], //为了对绑定源数据加工，做的临时变量
bindingSource: [], //绑定源数据
}
}
}}
在 watch 里面对绑定值进行加工
#codeprettify{{
watch: {
temp: {
handler(newVal, oldVal) {
var result;
//在这里对 bindingSource 进行任意的加工后，用 temp ...
return result;
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true,
}
}}
html里面绑定
#codeprettify{{
<el-form-item label="生产工序">
<el-checkbox-group v-model="temp" ....
}}
** v-model [#x388c58c]
是 vue 中的 双向数据绑定 指令， 是负责监听用户输入事件以...
(即只对表单控件标签的数据双向绑定有效)。
它并不会向子组件传递数据
- v-model 在内部为不同的输入元素使用不同的属性并抛出不同...
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
** :model [#m7bdee14]
: model 是 v-bind：model 的 简写
除引用类型外 都是单向数据传递 ， 父组件传递到了子组件。
引用类型（funcrtion ,array, object ）:子组件改变引用类型...
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
