目录
- 基础
- 差值语法
- 模板语法
- 数据绑定
- el与data的两种写法
- el与data写法1
- el写法2：挂载
- data写法2：函数式写法
- 绑定样式
- 绑定class样式
- 绑定style样式
- 条件渲染
基础
差值语法
<div id="root">
<h1>插值语法@萌狼蓝天 {{Date.now()}}</h1>
<h1>Meng Lang Lan Tian，Can you change it? >> {{number}}</h1>
<h2>{{message.toUpperCase()}}</h2>
<p>
1.创建Vue实例，传入配置对象
<br/>
2.容器中的Vue代码称为【Vue模板】
<br/>
3.容器中的代码依旧符合hmtl规范
<hr>
<div style="width: 100%;color:white;background-color: rgb(255, 193, 193);padding:2px 0 2px 2em;">
注意区分表达式和代码
</div>
</p>
</div>
<script>
Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
el:'#root',//绑定元素 el：element 元素 | 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符。
data:{
number:'0',
message:"do you know i'am big or small ?"
}
})//创建Vue实例
</script>模板语法
<div id="app">
<!-- 插值语法 -->
<h1>Easy?{{is}}</h1>
<!-- 指令语法 | 功能：解析标签(标签属性、标签体内容、绑定事件……) -->
<a v-bind:href="url" target="_blank">点我跳转到博客</a>
<br>
<a :href="url" target="_blank">点我跳转到博客</a>
<hr>
<h1>Easy?{{school.is}}</h1>
<a :href="school.url" target="_blank">点我跳转到博客</a>
</div>
<script>
new Vue({
el:"#app",
data:{
is:"Right",
url:"https://cnblogs.com/mllt",
school:{
is:"Wrong",
url:"https://mllt.cc"
}
}
})
</script>数据绑定
<div id="app">
单向数据绑定(v-bind)：<input type="text" v-bind:value="name"><br/>
双向数据绑定(v-moudle)：<input type="text" v-moudel:value="blog"><br/>
双向数据绑定(v-moudle)：<input type="text" v-moudel:value="blog">
<!-- v-moudel只能用于表单类元素 -->
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:"#app",
data:{
name:"萌狼蓝天",
blog:"htts://cnblog.com/mllt",
}
})
</script>el与data的两种写法
el与data写法1
Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
el:'#root',//绑定元素 el：element 元素(唯一根元素) | 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符。
data:{
number:'0',
message:"do you know i'am big or small ?"
}
})//创建Vue实例el写法2：挂载
Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
data:{
number:'0',
message:"do you know i'am big or small ?"
}
})//创建Vue实例
console.log(vm)
//第二种写法
vm.$mount('#root')
//mount：挂载
//setTimeout(()=>{
// vm.$mount('#root')
//},3000) //3秒延迟
data写法2：函数式写法
Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
//函数式写法
data:function(){
//必须要有return
return{
number:'0',
message:"do you know i'am big or small ?"
}
}
})//创建Vue实例
console.log(vm)
vm.$mount('#root')下面是简写
Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
//函数式写法 组件必须用函数式
// data:function(){
// console.log('@@@',this)//this:Vue的实例对象
// //必须要有return
// return{
// number:'0',
// message:"do you know i'am big or small ?"
// }
// }
//函数式写法 简写
data(){
console.log('@@@',this)//this:Vue的实例对象
//必须要有return
return{
number:'0',
message:"do you know i'am big or small ?"
}
}
//原则：由Vue管理的函数 禁止使用“=>”函数写法
})//创建Vue实例
console.log(vm)
vm.$mount('#root')绑定样式
-
class样式
写法
:class="xxx"xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。 -
style样式
:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。
绑定class样式
.basic{
border: 1px solid red;
}
.round{
border-radius:5px;
}
.text-center{
text-align: center;
}
.text-indent{
text-indent: 2em;
}<div id="root" >
<!-- 绑定class样式， 字符串写法 适用于 样式的类名不确定，需要动态指定 -->
<div class="basic" :class="newClass">
Just play
</div>
<button @click='changeMood'>change</button>
<button @click='changeMood2'>change2</button>
<br>
<hr>
<br>
<!-- 绑定class样式,数组写法,适用于 要绑定的样式个数不确定,名字也不确定 -->
<div class="basic" :class="classArr">
Just play
</div>
<br>
<hr>
<br>
<!-- 绑定class样式,对象写法,适用于 要绑定的样式个数确定,名字也确定,但是要动态决定是否使用这些样式 -->
<div class="basic" :class="classObj">
Just play
</div>
</div>Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
el:'#root',
data(){
return{
newClass:'round',
classArr:['round','text-center','text-indent'],
classObj:{
round:true
}
}
},
methods:{
changeMood(){
this.newClass='text-center round'
},
changeMood2(){
const arr = ['round','text-indent','text-center']
const index = Math.floor(Math.random()*3)
this.newClass=arr[index]
},
}
})
vm.$mount('#root')绑定style样式
.basic{
border: 1px solid red;
}<div id="root" >
<div class="basic" :style="{fontSize:fsize+'px'}">
Just play
</div>
<br><br>
<!-- 绑定style样式，对象写法 -->
<div class="basic" :style="styleObj">
Just play
</div>
<br>
<br>
<div class="basic" :style="[styleObj1,styleObj2]">
Just play
</div>
<br>
<br>
<!-- 绑定style样式，数组写法 -->
<div class="basic" :style="styleArr">
Just play
</div>
</div>Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
el:'#root',
data(){
return{
fsize:40,
styleObj:{
fontSize:'40px',
},
styleObj1:{
color:'green',
fontSize:'20px',
},
styleObj2:{
background:'yellow',
},
styleArr:[
{
color:'green',
fontSize:'20px',
},
{
background:'yellow',
}
]
}
},
methods:{
}
})
vm.$mount('#root')条件渲染
-
v-if
- 写法:
(1).v-if="表达式”
(2).v-else-if="表达式"
(3).v-else="表达式” - 适用于:切换频率较低的场景。
- 特点:不展示的DOM元素直接被移除。
- 注意:
v-if可以和:v-else-if、v-else一起使用， 但要求结构不能被“打断”。
- 写法:
-
v-show
- 写法: v-show=" 表达式"
- 适用于:切换频率较高的场景。
- 特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
-
备注
使用v-if的时，元素可能无法获取到，而使用v-show 定可以获取到。
<div id="root">
<!-- 使用v-show做条件渲染 -->
<h2 v-show="wa">Oh Just Play1</h2>
<h2 v-show="1===1">Oh Just Play2</h2>
<!-- 使用v-if做条件渲染 -->
<h2 v-if="wa">Oh Just Play4</h2>
<h2 v-if="1===1">Oh Just Play3</h2>
<hr>
<h2>当前值为：{{n}}</h2>
<button @click="n++">n++</button>
<div v-show="n===1">v-Show 1</div>
<div v-if="n===2">v-if 2</div>
<div v-else-if="n===1">v-else-if 1</div>
<div v-else>v-else</div>
<!-- v-if 和 v-else 和 v-else-if 在使用时，要紧紧连在一起，不允许被打断，不然不形成整体 -->
<hr>
<!-- template只能和v-if使用，不能和v-show使用 -->
<template v-if="n===2">
<h2>路人甲</h2>
<h2>路人2</h2>
<h2>路人3</h2>
</template>
</div>Vue.config.productionTip=false//隐藏控制台提示
const vm = new Vue({
el:'#root',
data(){
return{
wa:false,
n:0,
}
}
})
vm.$mount('#root')