Vue入门学习笔记-从入门到模版语法

标签：jQuery Vue 入门模版 js 实例 message data

前言

建议：

建议学习HTML5+CSS3+JavaScript之后在学Vue
HTML和JavaScript需要着重学习，如果还学了jQuery更好
Vue本身是基于JavaScript开发的框架，完全兼容JavaScript语法
本学习笔记着重记录Vue语法和使用的相关特性，目的是为了后端开发人员快速上手Vue开发。

Vue 和 jQuery 的区别

vue 和 jquery 都是前端开发中常用的框架和库，但它们在设计理念，应用场景和使用方式等方面有很大的不同

一、设计理念不同

Vue 是一种被称为MVVM（Model-View-ViewModel）的设计模式。这种模式可以将应用程序视为由三个部分构成的单元：用户界面（视图），应用程序数据（模型）和处理用户输入的逻辑，即视图模型。Vue 提供了实现这种模式的基本工具，用于将视图与模型和视图模型之间的依赖关系建立起来。

jQuery 是一种简化DOM操作的工具库，旨在让开发人员以更少的代码实现更多的效果。jQuery 对事件、动画、AJAX和DOM操作等方面提供了丰富的支持，它主要针对的是JavaScript的原生操作难以做到的一些高级操作。

二、应用场景不同

Vue 主要专注于构建大型单页应用程序（SPA），它提供了更加高效的DOM操作和渲染方式，以及更加灵活的数据绑定和组件化方式。对于需要快速构建交互式界面的应用程序，Vue 是一个非常好的选择。

jQuery 则更倾向于网站开发，特别是针对那些需要大量事件处理和DOM操作的页面。使用jQuery可以大幅减少代码量，因此对于轻度交互的网站，jQuery 会是一个非常实用的工具。

三、使用方式不同

Vue 的使用方式类似于其他现代前端框架，它是基于组件化的思想构建的。在Vue中，一个页面是由多个组件构成的，每个组件可以拥有自己的HTML模板、CSS样式和JavaScript代码。这种组件化的设计使得代码可以更好地组织和重用。（更好的重用模版，快速构建项目）

而jQuery则主要是以函数的形式提供各种操作，开发者可以直接使用而不需要引用其他js文件，当然，jQuery也可以通过模块化加载方式引用。（进行复杂的事件处理和DOM操作，使用jQuery是一个好的选择）

四、学习难度不同

因为Vue具有较高的组件和模块化支持，它在初学者面前可能显得比较难以掌握，需要一些额外的学习成本。同时Vue的开发工具也需要基于Node.js，相对于jQuery来说有比较大的学习曲线。但学会Vue可以更高效和规范的开发大型、复杂的前端应用程序。

而jQuery则相对来说学习难度较低，可以快速上手，不需要配置环境。对于初学者或者需要快速实现某些功能的开发者来说，jQuery是一个更好的选择。

总结

综上所述，Vue和jQuery两者都有各自的优势和特点。Vue适用于构建大型单页应用程序，而jQuery适用于构建需要大量事件处理和DOM操作的页面。学习Vue需要一些额外的成本，但是可以提高开发效率和程序的可维护性。而jQuery则更适合初学者或者需要快速实现某些功能的开发者。

框架和库的区别

框架：

框架（Framework）是一个综合性的解决方案，它提供了一套预定义的结构、组件和规则，旨在帮助开发者快速构建和部署应用程序。

可以理解为，框架是一个半成品，可以基于一个现有模版，使用框架预先规定的规则进行快速开发，迅速构建一个项目，框架一般只需要使用框架提供的类和函数，就可以实现全部功能。

库：

库（Library）是一组预编译的代码集合，它封装了特定的功能或算法，供开发者在开发过程中调用。库通常包含了一系列函数、类、接口等

可以理解为，一些库是对原有代码的封装，目的是为了简化原生代码的操作步骤，提高开发效率，引入库，可以大大减轻开发的难度。

Vue入门

什么是Vue？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

主要理解：Vue的核心功能是一个视图模版引擎，只做本职之内的事情，使用更加灵活。当然Vue也可以成为一个框架，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

自底向上增量开发是一种设计程序的过程和方法，具体来说，它指的是在软件开发过程中，先从最基本的部分或功能开始，逐步构建和完善整个系统。这种方法强调从基础做起，通过不断地增加功能和模块，来逐步实现软件的完整性和复杂性。

第一个实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

对于Vue.js的安装，这里不在赘述，这里使用的vue.js文件都是网络路径（保证网络畅通）

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：

var vm = new Vue({
  // 选项
})

一个Vue构造器中需要哪些内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="csx_id">
			
			<h1>{{message}}</h1>
			<h2>{{f1()}}</h2>
		</div>
		<script>
			new Vue({
				el:'#csx_id',
				data:{
					message:'Hello Vue!',
					author: 'csx'
				},
				methods:{
					f1 :function(){
						return this.author + ":  Hello World";
					}
				}
			});
		</script>
	</body>
</html>

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id，如上div标签中的id为"csx_id"
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响
data 用于定义属性，实例中有三个属性分别为：message，author
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。（实现了数据的双向绑定）

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="csx_id">
			
			<h1>{{message}}</h1>
			<h2>{{f1()}}</h2>
		</div>
		<script>
			var data={ message:"Hello Vue!",author:'csx'};
			var vm=	new Vue({
				el:'#csx_id',
				data : data,
				methods:{
					f1 :function(){
						return this.author + ":  Hello World";
					}
				}
			});
			document.write(vm.$data===data);
			document.write("<br>");
			document.write(vm.$el===document.getElementById('csx_id'));
		</script>
	</body>
</html>

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

Html

使用 v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>VaporGas</h1>'
  }
})
</script>
</body>
</html>

属性

HTML 属性中的值应使用 v-bind 指令。
以下实例判断 flag 的值，如果为 true 使用 cls1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.cls1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="flag" id="r1">
  <br><br>
  <div v-bind:class="{'cls1': flag}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      flag: false
  }
});
</script>
</body>

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<!-- 算术运算符 -->
	{{5+5}}<br> 
	<!-- 三元运算符 -->
	{{ ok ?'yes' : 'no' }}<br>
	<!-- JS函数调用 -->
	{{ message.split('').reverse().join('') }}
	<!-- 绑定id属性值 -->
	<div v-bind:id="'list-' + id">Vues教程</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	ok: false,
    message: 'Hello',
	id : 1
  }
})
</script>
</body>
</html

指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
	
    <template v-if="ok">
      <h1>如何快速入门Vue</h1>
      <p>推荐去菜鸟教程</p>
      <p>推荐看VaporGas博客</p>
	  
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: false,
    ok: true
  }
})
</script>
</body>
</html>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <pre><a v-bind:href="url">百度一下，你就知道</a></pre>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>
</body>
</html>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="监听的事件名>

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})
</script>
</body>
</html>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage()">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>
注意：绑定在HTML标签中的事件属性中的函数调用，可以省略小括号，也可以写上（都可以触发单击事件）

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。
- 以下实例对输入的字符串第一个字母转为大写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'vue.js'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<a v-bind:href="url"></a>

<a :href="url"></a>
v-on 缩写

<a v-on:click="doSomething"></a>

<a @click="doSomething"></a>

总结

从入门到实践学习：Vue的入门语法到Vue的模版语法

标签：jQuery,Vue,入门,模版,js,实例,message,data
From： https://blog.csdn.net/weixin_52937170/article/details/142069342