vue.js学习
程序员文章站
2022-06-06 20:15:52
...
Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别
-
MVC 是后端的分层开发概念；
-
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
-
为什么有了MVC还要有MVVM
Vue指令之v-bind的三种用法
1.直接使用指令v-bind
2.使用简化指令:
3.在绑定的时候，拼接绑定内容：:title=“btnTitle + ‘, 这是追加的内容’”
Vue指令之v-on和跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" name="" id="" value="浪起来" @click="lang" />
<input type="button" name="" id="" value="低调" @click="stop"/>
<h4>{{msg}}</h4>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'好好读书，别浪!!!!',
intervalid:null//在data上定义 定时器ID
},
methods:{
lang(){
// console.log(this.msg)
//定时器为空的时候才可以运作
if(this.intervalid != null) return;
this.intervalid = setInterval( () =>{
var start = this.msg.substring(0,1)
//获取第一个字符
var end=this.msg.substring(1)
//获取后面所有字符
this.msg=end + start
//重新拼接
},400)
},
stop(){
clearInterval(this.intervalid)
//每次清除了定时器后，需要重新把intervalid 置为null
this.intervalid = null;
}
}
})
</script>
</body>
</html>
Vue指令之v-on的缩写和事件修饰符
事件修饰符
1.stop 阻止冒泡
2.prevent 阻止默认事件
3 .capture 添加事件侦听器时使用事件捕获模式
4.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
5 .once 事件只触发一次
Vue指令之v-model和双向数据绑定
简易计算器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1" />
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="button"value="=" @click="calc"/>
<input type="text" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc(){//计算的算法
switch(this.opt){
case '+':
this.result=parseInt(this.n1) + parseInt(this.n2)//parseInt 把字符串转为整数
break;
case '-':
this.result=parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result=parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result=parseInt(this.n1) / parseInt(this.n2)
break;
}
}
}
})
</script>
</body>
</html>
在vue中使用样式
内联样式
1.将样式对象，定义到 data 中，并直接引用到 :style 中
<body>
<div id="app">
<h1 :style="style1">这是一个H1</h1>
<h1 :style="[style1 ,style2]">这也是一个H1</h1> <!--运用两种样式时可以用数组绑定-->
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
style1:{color:'blue','font-weight': 200},
style2:{'font-style':'italic'}
}
})
</script>
</body>
2.直接在元素上通过 :style 的形式，书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
使用class样式
先在定义好class样式
1.数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
2.三元表达式（较复杂）
<h1 :class="['red',flag?'active':'']">这是一个的H1</h1>
3.数组中嵌套对象
<h1 :class="['red',{'active':flag}]">这是一个H1</h1>
2和3中的data如下
data:{ flag:false }
4.直接使用对象
<h1 :class="{red:true,active:true}">这是一个H1</h1>
Vue指令之v-for和key属性
1.迭代数组
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
2.迭代数字
<p v-for="count in 10">这是第{{ count }}次循环</p>
3.迭代对象中的数组
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
对于Key属性的运用，最好加上，以确保选中
<body>
<div id="app">
<label>ID:
<input type="text" v-model="id">
</label>
<label>Name
<input type="text" v-model="name">
</label>
<label>
<input type="button" value="Add" @click="add">
</label>
<!--注意v-for循环的时候，key属性只能使用number获取string-->
<!--注意key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值-->
<!--在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">
{{item.id}}----------------{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
list: [
{id:1, name:'a'},
{id:2, name:'b'},
{id:3, name:'c'},
{id:4, name:'d'},
]
},
methods: {
add()
{
this.list.unshift({id:this.id, name:this.name})//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
}
},
})
</script>
</body>
Vue指令之v-if和v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
上一篇： 查找数组中指定键名的值_PHP教程