internal instruction learning
<div id="app">{{mesgee}}</div>
<script>
var app = new
View
({
el: '# app',
data:{
'
mesgee
':'hello word!'
}
});
</script>
*
Assign values to the set variables in the form of double braces; at the same time initialize the Vue plugin, el is the area where the element is executed.
v-if v-else v-show
<div v-if="isload">{{mesgss}}</div>
<script>
var app = new Vue ({
el: '# app',
data:{
mesgss: 'Text to be displayed',
isload:true,
}
});
</script>
*
All commands with v- are internal commands, and you can also customize commands
The difference between *v-if and v-show: The simple point is that show already exists in the DOM if not yet
v-if: Determine whether to load, which can reduce the pressure on the server and load when needed.
v-show: Adjust the css dispaly property to make the client operation smoother
v-for
<div v-for="item in items">{{item}}</div>
<script>
var app = new Vue ({
el: '# app',
data:{
items:[1,2,3,4,5,6]
}
});
</script>
v-text v-html
<div v-text="textcontent"></div>
<div v-html="htmlStr"></div>
<script>
var app = new Vue ({
el: '# app',
data:{
textcontent:'这是v-text的文本内容',
htmlStr:'<h2>这是v-html的文本内容</h2>'
}
});
</script>
*
{{xxx}}
,这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}
*
v-text与v-html的区别就是当需要输出的中有元素标签的时候需要用到v-html，反之就是v-text
v-on 事件绑定，可用@代替<div @click="onclick"></div>
<div v-on:click="onclick">{{mesgess}}</div> or <div @click="onclick">{{mesgess}}</div>
<script>
var app = new Vue({
el:'#app',
data:{
mesgess:'点击'
},
methods:{
onclick:function(){
console.log(this.mesgess+'了！');
}
}
});
</script>
*想要使用vue中定义的变量，直接使用this开头定义
v-model 双向数据绑定
<div v-model="megess"></div>
<script>
var app = new Vue({
el:'#app',
data:{
megess:'双向数据绑定！'
}
});
</script>
v-bind设置的是标签的属性，类似jquery的attr()方法。同样也有缩写 :href=""
<img v-bind:src="srcStr"> or <img :src="srcStr">
<script>
var app = new Vue({
el:'#app',
data:{
srcStr:'../../img/***.png',
}
});
</script>
a.直接绑定className <img :class="className">
b.
绑定classA并
进行判断
，在isOK为true时显示样式，在isOk为false时不显示样式。
<div
:
class
=
"{classA:isOk}"
>
2、绑定class中的判断
</div>
c.
绑定class中的
数组
<
div
:
class
=
"[classA,classB]"
>
3
、绑定
class
中的数组
</
div
>
d.
绑定class中使用三元表达式判断
<
div
:
class
=
"isOk?classA:classB"
>
4
、绑定
class
中的三元表达式判断
</
div
>
e.
绑定style
<
div
:
style
=
"{color:red,fontSize:font}"
>
5
、绑定
style
</
div
>
f.
用对象绑定style样式
<
div
:
style
=
"styleObject"
>
6
、用对象绑定style样式
</
div
>
var
app
=
new
Vue
({
el
:
'#app'
,
data
:
{
styleObject
:
{
fontSize
:
'24px'
,
color
:
'green'
}
}
})
v-pre
在模板中跳过vue的编译，直接输出原始值,可直接在网页上显示{{megess}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。