vue.js 基础复习

最新推荐文章于 2023-12-23 15:25:49 发布

洛心尘

最新推荐文章于 2023-12-23 15:25:49 发布

阅读量358

点赞数 1

分类专栏： vue 文章标签： vue.js html5 es6

本文链接：https://blog.csdn.net/qq_42942531/article/details/107879636

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue基础复习

1.vue简介

	1.JavaScript框架

	2.用于构建用户界面的**渐进式框架**（自底向上逐层应用）

	3.简化DOM操作

	4.响应式数据驱动

	5.第三方库：网络通信（axios(实现ajax))、页面跳转（router）、状态管理（vuex)

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：下面为HTML和js的一般写法。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

el：挂载
可以使用 id class 和普通元素选择器，但是推荐使用 id 。因为id不像class和元素选择器有其他的样式修饰，所以 id 可以唯一标识，这样可以明确vue的作用域。

data：数据对象

1.vue中用到的数据定义到data中。
2.data可以写复杂数据类型。
3.在渲染复杂数据类型时，遵守js语法。

vue 指令

1.内容绑定。事件绑定
v-text （标签文本值（textContent）innerText）
v-html  （innerHTML）
v-on 基础( :clic=" "     ,@clic="    " )

2.显示切换，属性绑定
v-show   (通过 true或false   来替换显示状态（操纵的是样式（display）））
v-if   （（操纵的是DOM））
v-bind   （设置元素属性：src,title,class）(:title=' ' ,鼠标悬停显示title='    '内容 ）

3.列表循环、表单绑定
v-for
v-on 补充
v-model (双向数据绑定）

MVVM模式

M：model 数据模型
V：视图模板
VM：视图模型
VM层是中间层，连接数据模型和视图模板，由Vue实现。由vm代替以前的dom操作，只操作vm层

Vue实例

数据绑定  （data）
计算属性与侦听器（computed）（watch）
属性绑定   v-on   v-bind
条件渲染 v-if v-show
列表渲染 v-for
过滤器  filers
组件  components
绑定事件 事件修饰符 表单

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
</head>
<body>

	<div id="demo">
		{{name}}   <!-- 数据绑定 -->
		{{changeName}}     <!-- 绑定计算属性的changeName -->
		<!-- 通过v-bind:命令绑定属性名 -->
		<!-- 其中class和style比较特殊，要使用数组形式：v-bind:class="[class1]" -->
		<!-- 也可以通过对象的形式：v-bind:class="{class1:classBoolean}",其中class1是class名，而classBoolean才是绑定的变量，为true时才将class1绑定上  （实现添加或删除class） -->
		<span v-bind:data="message" v-bind:id="id">{{name}}</span>
		<!-- v-show 控制节点显示或隐藏,ifshow是绑定的数据，为true时显示，false时内部设为display:none -->
		<!-- v-if也是控制节点显示隐藏，但v-if为false时，是删除节点 -->
		<!-- 频繁切换时，考虑重拍重绘，v-if会更浪费性能 -->
		<div v-show='ifshow'>条件渲染演示</div>
		<!-- items是一个数组，会被v-for遍历，item就是遍历的结果 -->
		<span v-for="item in items">{{item.title}}</span>
		<!-- v-on绑定事件，click为事件名，click1为回调函数，写在methods内 -->
		<button v-on:click="click1">点击</button>
		<!-- 事件修饰符，在事件的回调函数后添加一个.enter，代表只有按下回车键才会触发该事件 -->
		<input type="text" name="" v-on:keyup.enter="keyup1">
		表单，初始化时，会将value的值默认填入input框
		<input type="text" name="" v-model="value">

	</div>		

	<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
	<script type="text/javascript">
		//在vue当中，需要一个dom节点挂载Vue,并且vue语法只在此节点内生效
		var vm = new Vue({
			el: "#demo",   // el对应dom节点的id,就把Vue挂载在了dom节点上了
			data:{   // 数据绑定   所有数据都会绑定到实例vm上
				name:"tanjw",
				message : 123,
				id:"demo1",
				ifshow:false,
				items:[{
					title:"18"
				},{
					title:"20"
				}],
				value:123
			},
			//  当name变化时，就会在computed内找一些相关属性
			computed:{  //   计算属性，内部写一些函数
				changeName: function(){  //  当通过控制台改变vm实例name时，changName也会随着变化，监控name的变化
					return "my name is " + this.name;
				}
			},
			methods:{
			// 专门处理异步回调函数
				click1:function(){
					console.log(this);
				},
				keyup1:function(){
					console.log(this.value);
		})
	</script>
</body>
</html>

methods
其中使用到的各种事件方法都写在methods中。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },methods:{
  
  }
})

模板 templata

1.html模板
2.字符串模板
3.render函数

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<div id="demo">
		{{message}}
		<!-- 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令： -->
		<div v-html="message"></div>  <!-- 这是两层div -->
		<!-- 当使用message时，{{id}}并没有被当做一个绑定数据，而是一个字符串，这就是v-html模板的不足 -->
		<div v-html="message1"></div>  <!-- 这是两层div -->
		<!-- 为弥补次不足，Vue又引入了字符串模板，写在template中 -->
		<!-- 但template的内容会覆盖掉整个被挂载的div -->
	</div>
	
	<!-- 一般会把template单独拿出来，如下 -->
	<script type="x/template" id="template1">
		<div>hello Vue{{id}}</div>
	</script>

	<script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
	<script type="text/javascript">
		 var vm = new Vue({
		 	el:"#demo",
		 	data:{
		 		message:"<div>hello Vue</div>",  //当绑定的数据是一个节点时，在浏览器并没有被解析成为一个节点，而是一个字符串
		 		//  显而易见，我希望<div>hello Vue</div>要被解析成为一个节点
		 		message1:"<div>hello Vue{{id}}</div>",
		 		id:"true"    
		 	},
		 	template:"#template1",
		 	//  render()函数模板，创建一个虚拟节点
		 	render(creatElement){
		 		var dom = creatElement("",{},[]);
		 		// 或者写成
		 		creatElement("div",{  
		 			attrs:{id："1"},  
		 			class:{     // class特殊，所以单独拿出来写
		 				vue1:true
		 			},
		 			domProps:{   // 会覆盖掉第三位的[]参数，优先级最高
		 				innerHTML:"任意"
		 			}
		 		},["任意"]);
		 		return dom;     //return dom 就相当于调用了render函数，会将此节点渲染到页面
		 		//  不管以何种方式底层都是调用了render函数
		 		// 但直接使用虽然会增加性能，但无法使用v-if v-for等指令，但可以通过原生JavaScript的if-else和map重写render函数
		 	} 
		 });
	</script>
</body>
</html>

参考文献：https://blog.csdn.net/qq_39403733/article/details/89741946?biz_id=102&utm_term=vue&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-2-89741946&spm=1018.2118.3001.4187

洛心尘

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js 基础复习

vue基础1.vue简介 1.JavaScript框架 2.用于构建用户界面的**渐进式框架**（自底向上逐层应用） 3.简化DOM操作 4.响应式数据驱动 5.第三方库：网络通信（axios(实现ajax))、页面跳转（router）、状态管理（vuex)Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：下面为HTML和js的一般写法。<div id="app"> {{ message }}</div>
复制链接

扫一扫