vue基础语法知识整理
建立html文件,并引入vue的js,如:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
声明:
var vm = new Vue({…}} 固定写法,放在script标签内
el:表示需要渲染的标签标识
data:需要渲染的数据
<script>
var vm = new Vue({
el: '#app',
data: {
name:'mone',
age:18,
msg:'我要写的信息',
src:'./images/demo_pic.jpg',
id:5,
isadd:false
}
})
</script>
插值表达式
<div id="app">
<!-- 普通展示数据 -->
<p>{{name}}</p>
<!-- 拼接字符串:字符串要包含在''之内 -->
<p>{{name+'你好'}}</p>
<p>{{age+10}}</p>
<!-- 三元表达式 -->
<p>{{age>18?'成年':'未成年'}}</p>
<!-- 添加if--else:不能直接添加逻辑结构 -->
<!-- <p>{{if(age>18){'成年'}else{ '未成年'}}}</p> -->
</div>
v-text: 这是一个属性,所以要放置在标签属性的位置,添加后不再使用插值表达式{{ }}
<div id="app">
<p>{{msg}}</p>
<!-- 使用v-text:它是一个指令,而指令是属性,所以在标签属性位置添加,指令不再添加{{}}-->
<p v-text='msg'></p>
</div>
v-bind:
v-bind可以用简写方式,如“:src”等于“v-bind:src”
<div id="app">
<p>{{name}}</p>
<!-- v-bind:说明:后面的属性需要绑定data中的某个数据 -->
<img v-bind:src="src" alt="">
<!-- 简写方式 :就代表动态绑定-->
<img :src="src" alt="">
<a :href="'/del?id='+id">删除</a>
<p :class="{'blueFont':isadd}">isadd为true的时候文字是蓝色的</p>
<!-- 如果一个属性值是变化的,就可以考虑使用动态绑定
任意的属性都可以动态绑定 -->
</div>
v-for
<div id="app">
<ul>
<!-- 想循环动态生成哪个结构,就在这个结构中添加v-for指令 -->
<li v-for='(value,index) in arr'>{{index}} : {{value}}</li>
<!-- <li v-for='value in arr' v-text='value'></li> -->
</ul>
<ul>
<!-- 第一个是value -->
<!-- :key:它可以唯一的标识某个数据,在数据进行变化的时候,只会动态的更新这一条数据,意味着可以提高页面的加载和刷新的效率 -->
<li v-for='(value,key,index) in student' :key='key'>{{index}} : {{key}} : {{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// 注意事项:
// 1.如果是通过数组的length属性修改数组的长度,那么页面中的数据不会动态刷新
// 2.如果是通过数组的下标来修改数组中的元素值,页面中的数据也不会自动的刷新
// 解决方式:
// 使用:Vue.set(源数组,索引,新值)
// 如果修改长度,可以使用数组的方式,如splice
arr:[1,2,3,4,5,6,7],
student:{
name:'mone',
age:20,
gender:true,
email:'lwenzi@mone.com',
gfc:20
}
}
})
</script>
v-model:令data数据和页面输入框内容做双向绑定
<div id="app">
<!-- v-model支持的元素类型:input/select/textarea -->
<!-- <input type="text" :value="msg"> -->
<!-- v-model:可以实现双向数据绑定:
1.如果修改model中的数据,view中的数据会发生改变
2.如果修改view中的数据,model中的数据也会发生改变 -->
<input type="text" v-model='msg'>
<input type="button" value='提交'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'随便来个值'
}
})
</script>
v-on:
<div id="app">
<input type="text" v-model='msg'>
<input type="button" value='提交' v-on:click='showMsg'>
<!-- 简写方式 -->
<!-- 1.就算没有显式的传递参数,那么事件触发的时候也会将当前事件源参数做为参数传递,但是如果只是显式的传递了自定义的参数,那么事件源参数就不再自动传递
2. $event就是当前的事件源参数 ,名字绝对不能改 -->
<input type="button" value='提交' @click='showMsg(123,$event)'>
<!-- 事件名称.prevent:阻止当前元素的默认行为 -->
<a href="http://baidu.com" @click.prevent='sayHi'>点我点我!</a>
<!-- 键修饰符,键别名 键修饰符,键代码 -->
<!-- <input type="text" name='username' v-model='username' @keyup.enter='showname'> -->
<input type="text" name='username' v-model='username' @keyup.13='showname'>
<!-- 对象语法 -->
<input type="button" value="我可绑定了多个事件^_^" v-on='{ mousedown: doThis, mouseup: doThat}'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'随便来个值',
username:'jack'
},
// 方法(包含事件处理函数)都可以在methods中定义,它是一个单独的成员.它是一个对象
methods:{
// showMsg:function(){}
// showMsg:() => {}
showMsg(v,k){
// alert(vm.msg)
// this就是当前的vm,this就是是指向当前的Vue实例
// 这个this在所有vue实例的成员中都能获取到
console.log(v)
console.log(k)
},
sayHi(){
alert('hello')
},
showname(){
alert(this.username)
},
doThis(){
console.log('doThis')
},
doThat(){
console.log('doThat')
}
}
})
</script>
v-if和v-show:
<div id="app">
<!-- v-show='isShow':v-show是通过样式来控制元素是否显示或隐藏,意味着他是操作样式 -->
<p v-show='isShow'>我是v-show</p>
<!-- v-if='isShow':是控制当前元素是否创建,意味着他是操作dom-->
<p v-if='isShow'>我是v-if</p>
<!-- 使用场景
1.如果是大量的操作dom,建议v-show,避免反复的创建dom结构
2.如果是异步渲染,加载新的数据,建议使用v-if,避免渲染多余的dom结构 -->
<span>成绩:</span>
<p v-if='score>=90'>A</p>
<p v-else-if='score>=80'>B</p>
<p v-else-if='score>=70'>C</p>
<p v-else-if='score>=60'>D</p>
<p v-else>E</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow:true,
score: 90
}
})
</script>
v-cloak:待vue编译完成后去除隐藏的样式,避免用户看见未被编译的代码
<style>
[v-cloak]{
display: none
}
</style>
<div id="app">
<!-- 添加了这个v-cloak指令的元素在未编译完成之前是隐藏的,如果编译完成。这个指令会自动的消失 -->
<p v-cloak>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'能不能看到我闪亮一下'
}
})
</script>