vue基础学习笔记

vue.js 基础学习笔记

一.Vue.js 是什么

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。

二.起步

1.引入vaue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.声明式渲染

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

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

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

概一、Data数据对象

(1)、data数据对象 （对象参数）

		<div id="app">
			{{message.name}}
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message:{
						name:"有饭吃嘛",
						school:"干饭工作室"
					}
				}
			})
	 </script>

(2)、data数据对象 （数组参数）

		<div id="app">
			{{message[0]}}
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message:["有饭吃嘛","干饭工作室"]
				}
			})
	 </script>

概二、el挂载点

注：Vue会管理el选项命中的元素及其内部的后代元素

		<div id="app" class="app">
			{{message}}
			<span>{{message}}</span>
		</div>
		<script>
			var app = new Vue({
			    el: "#app",    //id选择   一般首选id
			 //	el: ".app",    class选择
			//  el: "div",     标签选择
				data: {
					message:"有饭吃嘛"
				}
			})
	 </script>

3.本地应用----指令

v-text指令

设置标签内的内容（textContent）

默认写法替换全部内容，使用**差值表达式{{}}**可以替换指定内容

v-html指令

设置元素的innerHTML

内容中有html结构会被解析为标签

v-on指令

为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

v-on指令补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

v-show指令

根据真假切换元素的显示状态

原理是修改晕阿塞的display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为true元素显示，值为false元素隐藏

v-if指令

根据表达式的真假切换元素的显示状态

本质是通过操纵来切换显示状态

表达式的值为true，元素存在于dom树种，为false，从dom树中移出

v-bind指令

为元素绑定属性

简写的话可以直接省略v-bind，只保留：属性名

v-model指令

v-model指令的作用是便捷的设置和获取表单的值

绑定的数据会和表单元素相关联

绑定的数据<------->表单元素的值

alse，从dom树中移出

v-bind指令

为元素绑定属性

简写的话可以直接省略v-bind，只保留：属性名

v-model指令

v-model指令的作用是便捷的设置和获取表单的值

绑定的数据会和表单元素相关联

绑定的数据<------->表单元素的值