Vue知识Vue基础语法

Posted 2021-05-08 果子哥丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue知识Vue基础语法相关的知识，希望对你有一定的参考价值。

一、邂逅Vue.js

1、认识Vue.js

Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据
可复用的组件- 前端路由技术
状态管理
虚拟DOM

这些特点，在后面的学习和开发中都会慢慢体会到的。

学习Vuejs的前提？

从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
但是你需要具备一定的html、CSS、javascript基础。

2、Vue.js安装方式

CDN引入
在这里插入图片描述

下载和引入
在这里插入图片描述

NPM安装管理

通过webpack和CLI的使用

3、Vue初体验

创建Vue实例传入的options

el：
类型：string （#app）| HTMLElement  （document.querySelector）
作用：决定之后Vue实例会管理哪一个DOM。

data：
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

methods：
类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

（1）Hello

<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    // let（变量）/ const（常量）
    // 编程范式：声明式
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: "你好啊"
        }
    })

    // 原生js的做法  编程范式：命令式
    // 1.创建div元素，设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在div元素中显示
</script>
</body>

（2）列表展示

<body>
<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  // let（变量）/ const（常量）
  // 编程范式：声明式
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: { // 定义数据
      movies: ['蜘蛛侠','钢铁侠','美国队长','大话西游']
    }
  })
</script>
</body>

（3）计数器
新的属性：methods，该属性用于在Vue对象中定义方法。
新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）

<body>
<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <!-- v-on:click = @click -->
  <button @click="counter++">+</button>
  <button @click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  // let（变量）/ const（常量）
  // 编程范式：声明式
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: { // 定义数据
      counter: 0
    }
  })
  // 原生JS：
  // 1.拿button元素
  // 2.添加监听事件
</script>
</body>

通过methods

<body>
<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <!-- v-on:click = @click -->
  <button @click="add">+</button>
  <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  // let（变量）/ const（常量）
  // 编程范式：声明式
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: { // 定义数据
      counter: 0
    },
    methods: {
      add: function () {
        this.counter++
      },
      sub: function () {
        this.counter--
      }
    }
  })
</script>
</body>

4、Vue的MVVM框架

在这里插入图片描述
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

View发生点击，ViewModel监听响应，回调Model中的js函数
View层：

视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

Model层：

数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

ViewModel层：

视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

在这里插入图片描述

当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--这是我们的View-->
		<div id="app">
			{{ message }}
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		// 这是我们的Model
		var exampleData = {
			message: 'Hello World!'
		}

		// 创建一个 Vue 实例或 "ViewModel"
		// 它连接 View 与 Model
		new Vue({
			el: '#app',
			data: exampleData
		})
	</script>
</html>

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app’表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

模板template
在这里插入图片描述

二、Vue基础语法

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式。

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令
v-once指令

v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>Hello, Vue.js!</h1>
			<h1 v-if="yes">Yes!</h1>
			<h1 v-if="no">No!</h1>
			<h1 v-if="age >= 25">Age: {{ age }}</h1>
			<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		
		var vm = new Vue({
			el: '#app',
			data: {
				yes: true,
				no: false,
				age: 28,
				name: 'keepfool'
			}
		})
	</script>
</html>
注意：yes, no, age, name这4个变量都来源于Vue实例选项对象的data属性。

这段代码使用了4个表达式：

数据的yes属性为true，所以"Yes!"会被输出；
数据的no属性为false，所以"No!"不会被输出；
运算式age >= 25返回true，所以"Age: 28"会被输出；
运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。

条件渲染小案例

用户登录时，可以切换使用用户账号登录还是邮箱地址登录
切换时，input框要清空（如果缺少key的话，会导致切换时，输入框扔保存上一个类型的值） —— 先把要渲染的东西通过虚拟DOM放到内存里
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。这是因为Vue进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
解决方案：如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，并且我们需要保证key的不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="mail">
  </span>
  <button @click="changeType">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: { // 定义数据
      isUser: true
    },
    methods: {
      changeType () {
        this.isUser = !this.isUser
      }
    }
  })
</script>
</body>
</html>

v-show指令

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性（display）。

	<body>
		<div id="app">
			<h1>Hello, Vue.js!</h1>
			<h1 v-show="yes">Yes!</h1>
			<h1 v-show="no">No!</h1>
			<h1 v-show="age >= 29">Age: {{ age }}</h1>
			<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
		</div>
	</body>

表达式age >= 29的值为false，可以看到<h1>Age: 29</h1>元素被设置了style="display:none"样式。

v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1 v-if="age >= 25">Age: {{ age }}</h1>
			<h1 v-else>Name: {{ name }}</h1>
			<h1>---------------------分割线---------------------</h1>
			<h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
			<h1 v-else>Sex: {{ sex }}</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				age: 28,
				name: 'keepfool',
				sex: 'Male'
			}
		})
	</script>
</html>

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
这段代码中v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else仍然渲染到HTML了。

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"
items是一个数组，item是当前被遍历的数组元素。

v-for遍历数组和对象

<div id="app">
    遍历数组
<!--    1.在遍历的过程中，没有使用索引值-->
    <ul>
      <li v-for="item in items">{{item}}</li>
    </ul>

<!--    2.在遍历的过程中，获取索引值-->
    <ul>
        <li v-for="(item,index) in items">{{index}}-{{item}}</li>
    </ul>

    遍历对象
    1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>
    2.获取key和value 格式：(value,key)
    <ul>
        <li v-for="(value,key) in info">{{value}}-{{key}}</li>
    </ul>
    3.获取key和value和index 格式：(value,key,index)
    <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = Vue3基础知识总结
 Vue知识Vue基础语法
 Vue基础（干货+代码）
 Vue知识点全集
 Vue基础知识
 【Vue】vue基础知识一（本地数据操作）