2021.7.12笔记 vue入门

是吃货不是贝爷

已于 2022-06-28 10:39:08 修改

阅读量186

点赞数

分类专栏： vue笔记文章标签： vue

于 2021-07-12 18:07:35 首次发布

本文链接：https://blog.csdn.net/q4451728/article/details/118680399

版权

vue笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

起步（包括el或者$mount）

在这里插入图片描述

<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			message: 'hah ！',
		}
	})
</script>

1.插值语法（{{—}}）
插值语法不仅可以写表达式{{name.toUpperCase}}
还可以写运算{{1+1}}（结果为2）
还可以写所有出现在Vue实例的东西比如下图中的$mount({{$mount}})

2.el的两种写法
注意这里面的el也可以不用，而是用app实例的原型对象。

请添加图片描述

const v = new Vue({
  //el:'#mount1',
  data:{
    name: '小可爱',
  }
})
console.log(v);		//打印出实例，看里面的prototype
v.$mount('#mount1')		//用图中的$mount

setTimeout(() => {
  v.$mount('#mount1');  
  /*$mount优点就是更加灵活，比如
  该例子中加了个定时器，那么就可以动态显示
  */
},1000)

3.data的两种写法
1）对象式

const v = new Vue({
  //el:'#mount1',
  data:{
    name: '小可爱',
  }
})

2）函数式

const v = new Vue({
  el:'#mount1',
  data(){
    return{
    	name: '小可爱',
    }
  }
  /*或者
  el:'#mount1',
  data:function(){
    return{
    	name: '小可爱',
    }
  }
  */
})

注意：
1.这里不能用箭头函数，因为这个function是vue实例的，this的话就是这个实例，而箭头函数的话没有this，就会往外找，从而找到window对象。因此这里要么function，要么缩小写法。
2.这里要求用函数式，因为用到组件时必须用到函数式，否则会报错。
3.函数式的data就是Vue所管理的函数。[1]

MVVM（重要）

在这里插入图片描述
1.MVVM被广大主流框架借鉴。
2.其基本思想就是通过ViewModel搭建起View和Plain JavaScript Object（一般js对象）的桥梁。
3.对于Vue来说，绑定相应的html内容就是View，data内的内容就是Model，而Vue实例对象就是ViewModel（这就是为什么我们一般用vm去命名vue实例）。
4.插值语法内值的显示，不是因为data里面有，所以有，而是因为data里面有，通过一些方法到了vm实例对象后（Vue中的数据代理），才出现在页面上。
在这里插入图片描述

options

在这里插入图片描述

v-once

在这里插入图片描述

v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-html="url"></h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊！',
					url: '<a href = "http://www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

这样就不会以字符串形式显示，而是以html形式显示

v-text

跟html相似，text是展示文本的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-text="message"></h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊！'
				}
			})
		</script>
	</body>
</html>

但是这个会覆盖前一个文本，不够灵活

v-pre

用于显示直接信息，不想要解析出来的结果

以下结果就是{{message}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-pre>{{message}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊！'
				}
			})
		</script>
	</body>
</html>

v-cloak

避免vue代码还没加载完成，显示原来的{{**}}代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h2>{{message}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			setTimeout(function() {
				const app = new Vue({
					el: '#app',
					data: {
						message: '你好啊！'
					}
				})
			},1000)
			
		</script>
	</body>
</html>

高阶函数的使用

filter、map和reduce

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{newFunc()}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					
				},
				methods: {
					newFunc() {
						const numbers = [100, 40, 50, 60]
						let numbers2 = numbers.filter(function(n) {
							return n < 100
						})
						console.log(numbers2);
						
						let numbers3 = numbers2.map(function(n) {
							return n * 2
						})
						console.log(numbers3)
						let numbers4 = numbers3.reduce(function(pre, n) {
							return pre + n
						},0)
						console.log(numbers4)
					}
				}
			})
		</script>
	</body>
</html>

filter（过滤）：当回调函数的返回值为true的时候将相应的n放入新数组，反之过滤掉。
map（映射）：相当于映射，比如传入n，returnn n*2，那么存入数据的新数组就会让每个数乘以2
reduce（）：function（），num为两个参数，其中num表示的是初始值。那么这样可以将num设置为0，从而preval+n求出total总和。这里的preval就是上次的值，如果是求和就是上次求和的值。

ps：可以使用链式编程以及类似lambda表达式来简便代码

const numbers = [100, 40, 50, 60]
let numbers2 = numbers.filter(n => n < 100)
console.log(numbers2);

let numbers3 = numbers2.map(n => n * 2)
console.log(numbers3)
let numbers4 = numbers3.reduce((pre, n) => pre + n)
console.log(numbers4)

v-model绑定不同元素

<div id="testBox">
    <form @submit.prevent="submitFun">
        账号：<input type="text" v-model.trim="userInfo.account"><br /><br />
        密码<input type="password" v-model="userInfo.password"><br /><br />
        
        性别：男<input type="radio" name="usrGender" value="male" v-model="userInfo.gender">
        女<input type="radio" name="usrGender" value="female" v-model="userInfo.gender"><br /><br />
        爱好：扮家家酒<input type="checkbox" name="hobbyDetai" value="home" v-model="userInfo.hobby">
        吃零食<input type="checkbox" name="hobbyDetai" value="eat" v-model="userInfo.hobby">
        跳绳<input type="checkbox" name="hobbyDetai" value="heap" v-model="userInfo.hobby"><br /><br />
        家人：
        <select v-model="userInfo.family">
            <option value="mom">妈妈</option>
            <option value="dad">爸爸</option>
            <option value="son">儿子</option>
            <option value="daughter">女儿</option>
        </select>
        其他信息：
        <textarea v-model="userInfo.textCon"></textarea><br /><br />
        <input type="checkbox" v-model="userInfo.isChecked">已阅读<a href="www.baidu.com">信息</a><br /><br />
        <button>提交</button>
    </form>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el:'#testBox',
        data:{
            userInfo:{
                account:'',
                password:'',
                gender:'',
                hobby:[],
                family:'',
                textCon:'',
                isChecked:''
            }
        },
        methods: {
            submitFun() {
                console.log(JSON.stringify(this.userInfo));
            }
        },
    })
</script>

请添加图片描述

filter

因为用到的源库没响应，只能用别人的了。
感谢大佬

只能打点简单的。。

<div id="testBox">
    <h1>{{Date.now() | addSomething('哔哩哔哩') | newFun('哈哈哈哈')}}</h1>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el:'#testBox',
        data:{
            
        },
        filters:{
            addSomething(value,str) {
                return value + '---' + str;
            },
            newFun(value,str) {
                return value + '---' + str;
            }
        }
    })
</script>

请添加图片描述
可以看到vm里面并没有响应的filter方法，所以是this是获取不到vm对象的。

cookie

视频链接

生命周期

图示

视频

调试

调试到哪用debugger;

destroy

视频

api文档

组件

视频

API文档

Vue脚手架

视频
 API文档

更改默认文件

API文档
 视频

ref

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

API文档

props

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

API文档

mixin

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

API文档

插件

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

API文档

是吃货不是贝爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.7.12笔记 vue入门

1<div id="app">{{message}}</div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { message: 'hah ！', } })</script>2<div id="app"> <ul> <li v-for="
复制链接

扫一扫