vue新手入门-02

最新推荐文章于 2024-10-16 18:35:07 发布

全栈小天

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Web_ZAHNG3/article/details/122298843

版权

文章目录

数据控制

数据控制

el 指定模板

	el:"#app",//vue实例在id为app标签内可用

data 指定数据

data(){
   			return {msg:"你好大美河南"} //定义msg值为你好大美河南
   		}

注意 data里面的数据发生变化，vue会重新渲染模板

methods 指定方法

点击按钮弹出你好

<button @click=btn()>点击</button>
<script>
var vm = new Vue({
   		el: "#app",		
   		methods: {
   			btn() {
   				alert("你好")
   			}
   		}
   	})
</script>

conputed 计算属性

定义：用一个已有的属性通过加工或计算获得一个全新的属性这就是计算属性
原理:底层借助了objcet.defineproperty方法提供的getter和setter.
get函数什么时候执行?
(1)初次读取时会执行一次.
(2)当依赖的数据（一般指data对应的数据）发生改变时会被再次调用.
优势:与方法实现相比，内部有缓存机制(复用)，效率更高，调试方便.
页面效果
在这里插入图片描述

<body>
	<div id="app">
		<p>从现有的数据计算出新的数据</p>
		<p>{{msg}}</p>
		<input type="text" v-model="msg">
		<!-- 因为有缓存，多次使用get只会被调用一次 -->
		<p>{{rmsg}}</p>
		<p>{{rmsg}}</p>
		<p>{{rmsg}}</p>
		<p>{{rmsg}}</p>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			computed: {
				"rmsg": {
					get() {
						// console.log(this); //get内的this指向vm实例
						console.log("get被调用"); //get什么时候调用？1.第一次读取rmsg 2.data对应的数据msg发生改变
						// split 字符串分割为数组  reverse翻转数组join 把数组连接为字符串
						return this.msg.split('').reverse().join('');
					},
					// set什么时候调用？当rmsg修改时调用
					set(value) {
						console.log("set被调用", value);
						let msgs = value
						this.msg = msgs
					}
				}
				// 简写 只考虑读取不考虑修改时可以简写（就是没有set时）  get函数可以省略 
				// "rmsg"() {
				// 	return this.msg.split('').reverse().join('');
				// }
			},
			data() {
				return {
					msg: "你好大美河南"
				}
			}
		})
		// 这里修改rmsg只是为了调用set，程序运行时msg已经被修改了
		vm.rmsg = "您好，河南"
	</script>
</body>

watch 监听属性

页面效果
在这里插入图片描述

<body>
  <div id="app">
  	<h1>监听 watch</h1>
  	<p>监听数据的变化，并执行handler回调函数</p>
  	<button @click="num.n++">{{num.n}}</button>
  </div>
  <script>
  	var vm = new Vue({
  		el: "#app",
  		watch: {
  			// 如果是引用类型需要加上deep
  			"num": {
  				// handler是固定格式nval最新值，oval修改前的值
  				handler(nval, oval) {
  					console.log("数据由", oval.n, "变化为：", nval.n);
  				},
  				deep: true
  			}
  		},
  		data() {
  			return {
  				num: {
  					n: 1
  				}
  			}
  		}
  	})
  </script>
</body>

实现简单计算器

页面效果
在这里插入图片描述

<body>
	<div id="app">
		<h1>计算器</h1>
		<input type="text" v-model.number="num.n1">
		<select name="" id="" v-model="num.type">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">×</option>
			<option value="/">÷</option>
		</select>
		<input type="text" v-model.number="num.n2">
		<button>=</button>
		<span>{{result}}</span>

	</div>
	<script>
		// 监听num的变化，计算算result结果
		var vm = new Vue({
			el: "#app",
			watch: {
				"num": {
					handler() {
						// eval 把字符串当javascript执行 加括号是为了解决输入值为负出现的bug
						// this.result = eval(this.num.n1+this.num.type+this.num.n2)
						var str = "(" + this.num.n1 + ")" + this.num.type + "(" + this.num.n2 + ")";

						try {
							this.result = eval(str);
						} catch (e) {
							console.log(e);
						}

					},
					deep: true
				}
			},
			data() {
				return {
					result: 0,
					num: {
						n1: 0,
						n2: 0,
						type: "+"
					}
				}
			}
		})
	</script>
	</body>

实现本地存储

页面效果
点击回车向数组添加内容，点击刷新内容不会丢失
在这里插入图片描述


<body>
	<div id="app">
		<!-- @keyup.enter 绑定回车按键 -->
		<input type="text" v-model.trim="temp" @keyup.enter="addItem()">
		<p v-for="(item,index) in list" :key="index">{{item.name}}</p>
	</div>
	<script>
		// 实现本地存储功能：
		// 01 当数据list发生变化时候存
		// 02 当vue创建完毕的时候取 created
		var vm = new Vue({
			el: "#app",
			watch: {
				"list": {
					handler() {
						// setItem 设置本地数据
						// JSON.stringify把js对象转换为json字符串
						// JSON.prase 把字符串转换为js对象
						localStorage.setItem("list", JSON.stringify(this.list))
					},
					deep: true,
				}
			},
			methods: {
				addItem() {
					// 如果文本为空，就返回
					if (this.temp === "") {
						return;
					}
					// unshfit 添加到最前面
					this.list.unshift({
						name: this.temp,
						done: false,
						state: 0
					})
					// 清空临时框
					this.temp = "";
				},
			},
			data() {
				return {
					// 清单列表
					// getItem是获取本地存储数据，
					// ||"[]"如果获取不到转换为空的数组
					list: JSON.parse(localStorage.getItem("list") || "[]"),
					// list:[
					// 	// name标题，done是否完成 state 0正常状态 1 编辑状态 
					// 	{name:"学习Vue",done:false,state:0},
					// 	{name:"学习JQ",done:true,state:0},
					// ],
					//临时要添加的数据
					temp: '',
				}
			}
		})
	</script>
</body>

filters 过滤器

视图渲染
在这里插入图片描述

<body>
  <div id="app">
  	<h1>filter过滤管道</h1>
  	<p>格式输出文本</p>
  	<p>{{'王大鸣'|hide}}</p>
  	<p>{{'王伟'|hide}}</p>
  	<p>{{3.1415926|fix}}</p>
  	<p>{{100|fix}}</p>
  	<p>{{3.1415926|fix(4)}}</p>
  </div>
  <script>
  	var vm = new Vue({
  		el: "#app",
  		filters: {
  			fix(val, arg = 2) {
  				return Number(val).toFixed(arg)
  			},
  			// val代表了 '王大鸣'
  			hide(val) {
  				// 转换数组
  				var str = val.split('');
  				// 把第一个元素设置为*
  				str[1] = "*"
  				// 转换为字符串返回
  				return str.join('');
  			}
  		},
  		data() {
  			return {}
  		}
  	})
  </script>
</body>