目录
基础
差值语法
<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')
