vue.js学习

最新推荐文章于 2024-03-22 19:46:56 发布

风飞叶

最新推荐文章于 2024-03-22 19:46:56 发布

阅读量87

点赞数

分类专栏： vue

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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 较好。

风飞叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习

Node（后端）中的 MVC 与前端中的 MVVM 之间的区别MVC 是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel为什么有了MVC还要有MVVMVue指令之v-bind的三种用法1.直接使用指令v-bind2.使用简化指令:3.在绑定的...
复制链接

扫一扫