Vue基本指令
vue的优点
易用，灵活，高效
库：只具有某一种功能
框架：具备完整的功能 bootstrap element-ui
开发环境与生产环境
开发环境地址:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境地址:<script src="https://cdn.jsdelivr.net/npm/vue"></script>
vue特点
数据驱动 组件化 单页面应用
vue中指令(text)
v-text:与原生的innerText一致，只识别字符串
v-html:与原生的innerHTML一致，可以识别标签
vue中指令与插值的使用
插值表达式后面的内容会展示
通过指令绑定元素之间的内容不会显示
vue中指令（if）
v-if v-else-if v-else 如果......否则......
vue中的指令(show)
两者区别:
1.v-if是动态的向dom树中添加、删除元素
v-show通过设置css样式来实现
2.v-if是真实创建其具有惰性，如果初始值是false则不会渲染,同时也不会被缓存
v-show:无论初始值是否真假都会先渲染
总结:如果需要频繁切换需要用v-show
vue中的方法使用(v-on)
let vm = new Vue({
el:'#app',
data:{
name:'宏超'
},
// 所有的方法存放在methods中
methods: {
say(name){
alert('hi,'+name)
},
say2(){
console.log(this)
console.log('hi,'+this.name)
}
},
})
直接使用 {{say2()}} 调用
<body>
<div id="app">
<div @click = 'alertName'>点击实现效果</div>
<div @click = 'alertName2("褚阳森")'>点击实现效果</div>
<div @click = 'num++'>点击实现效果</div>
{{num}}
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:'志宝',
num:0
},
methods: {
alertName(){
alert(this.name)
},
alertName2(name){
alert(name)
}
},
})
</script>
注意：v-on:click='方法名' 可以简写为:@click='方法名'
1.绑定事件的另种方式：a.直接写方法名 b.直接写表达式(一般常用简单的表达式)
v-for(数组)
<body>
<div id="app">
<span v-for='item in arr'>{{item}}</span>
<p v-for='(item,index) in arr'>{{index}}-----{{item}}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
arr:['苹果','香蕉','橘子','榴莲']
},
methods: {
},
})
</script>
注意点: v-for 循环数组可以传递2个参数，第一个是数组的每一项，第二个是数组的索引
v-for(对象)
<body>
<div id="app">
<span v-for='item in objs'>{{item}}</span>
<p v-for='(value,key,index) in objs'>{{key}}-----{{value}}-------{{index}}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
objs:{
'水果':'苹果，香蕉，橘子',
'蔬菜':'小白菜，土豆，芹菜'
}
},
methods: {
},
})
</script>
注意：循环对象的时候，传递三个参数，分别代表value，key,index 位置不可以更换
v-bind绑定属性
<body>
<div id="app">
<!-- v-bind:msg 这是自定义指令，只能在元素中查看，可以作为某一项操作的标识 -->
<a v-bind:href="href" v-bind:title="title" v-bind:msg='msg'>点击跳转</a>
<a :href="href" :title="title" :msg='msg'>点击跳转</a>
<!-- <img src="" alt=""> -->
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
href:'https://www.baidu.com',
title:'我是标题1111',
msg:'hello'
},
methods: {
},
})
</script>
注意：v-bind:title='abc' 可以简写为 :title:'abc'
动态绑定样式class
<body>
<div id="app">
<!-- 这是普通的添加样式 -->
<div class="box">我是普通样式渲染</div>
<!-- 通过绑定类名的方式 -->
<div :class="className">我是第一种样式渲染</div>
<!-- 通过对象的方式 -->
<div :class="objClass">我是第二种样式渲染</div>
<!-- 通过三元表达式 -->
<div :class="[1==1?'blue':'yellow']">我是第三种样式渲染</div>
<!-- 通过拼接实现 -->
<div :class='"yellow " + font'>我是第四种样式渲染</div>
<div :class='"yellow " + "font"'>我是第四种样式渲染</div>
<!-- <div class="pink font"></div> -->
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
className:'pink',
objClass:{
'orange':true,
'font':true,
},
font:'font'
},
methods: {
},
})
</script>
注意：普通情况用第一种和普通绑定即可，如果后期需要动态添加那么就需要用到第四种
动态绑定style
<body>
<div id="app">
<!-- 普通的通过style绑定 -->
<div :style="{background:bgcolor,color:color}">我是通过style来设置的</div>
<!-- 通过对象的方式绑定样式 -->
<div :style='styleObj'>我是第二种通过style绑定</div>
<!-- 通过数组的方式绑定多个样式 -->
<div :style='[styleA,styleB]'>我是第三种通过style绑定</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
bgcolor:'#000000',
color:'#ffffff',
styleObj:{
fontSize:'40px',
color:'red',
background:'yellow'
},
styleA:{
color:'green',
},
styleB:{
fontSize:'30px',
}
},
methods: {
},
})
</script>
浙公网安备 33010602011771号