提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
前言
为了给用户带来更好的产品体验，留存更多的意向用户，企业越来越重视前台页面的展示效果，因此Wb前端开发工程师变得越来越紧缺，在企业中承担的角色也越来越重要Web前端学习是一个先易后难的过程，主要是通过HTML、CSS、JavaScript这三个技术编写前端代码，展现前端的用户界面。
除了上面介绍的Web前端工程师必须掌握的技术之外，Web前端工程师能够在开发中熟练运用前端框架也是必不可少的，使用框架能够减少开发时间，节约成本，现在比较常用的
主流框架有Vue.js、Reactjs和 Angular.js。
前端框架可谓百家争鸣，但每一个框架的产生都是为了解决具体问题。Vue.js 以渐进式
切入，对不同阶段的开发者提供了不同的开发模式，由浅入深。Vue.js提供了友好的 API和
强大的功能，包括双向数据绑定、路由、状态管理、动画、组件化、SSR，无论是简单的页
面还是复杂的系统，在可复用性、便捷性和维护性上都精益求精。
Vue.js框架是用于构建用户界面的渐进式框架，它可以自底向上逐层应用。Vue 的核心库只关注视图层，上手简单而且还便于与第三方库进行整合，Vue.js的目标是通过尽可能简
单的API实现响应的数据绑定和组合的视图组件。
提示：以下是本篇文章正文内容，下面案例可供参考
一、vue是什么？
・vue也是一个数据驱动框架，做spa页面的
・vue如果不做页面可以当做一个单独使用的js库，做双向数据绑定用
・Vue的核心库只关注视图层,但是vue并不只关注视图，和angular一样也有指令，过滤器这些东西
・vue有非常强大的单文件组件
就是css+html+js都写在一个.vue文件中，这样定义的组件很简洁，清晰，组件化分的很彻底
而angular中的js文件只能写js
虽然react中可以写css-in-js，但是缺乏选择器功能，即便可以在js中引入css文件，但还是不方便
・vue融合了react和angular的优点，并且解决了react和angualr的痛点
二、基础特性
1.vue实例常用到的构造选项
在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。
使用el 绑定DOM元素
运行效果如图所示：
2.date数据对象
data概述：
data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。
var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。
data定义的数据通过插值语法(“{{}}”)绑定到DOM节点。
data数据对象有以下两种:
(1)、对象（Object）的形式
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
data: {
content: "Mustache表达式通过data为对象获取content的值"
}
})
</script>(2)、函数（Function）的形式
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
// 这是下面function的简写形式
data(){
return {
name:'张三',
age:18
}
},
// 另一种写法
// data:function() {
// return {
// name: '张三',
// age: 18,
// sex: '男'
// }
// },
})
</script>3.methods方法
概述：
methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。
在methods方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例
基本语法：
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue.js核心文件 -->
<script src="../vue.js"></script>
</head>
<body>
<p>单击按钮修改文本</p>
<div id="app">
<p>{{msg}}</p>
<button @click="doChange">请单击</button>
</div>
<script>
var app=new Vue({
el: "#app",
data: {
msg: "初始文本！"
},
// 页面的点击事件都需要放到 methods 里面
methods: {
doChange: function () { //定义方法，若有多个方法，可使用逗号分隔
this.msg = "新的文本！"
}
}
})
</script>
</body>
</html>运行结果如图所示（前为单击前的初始数据，后为单击后的改变数据）：
4.常用指令
概述：
指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。
Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。
(1)、v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
<div id="app" v-text="msg"></div>
<script>
var app=new Vue({
el: "#app",
data: {
msg: "Hello,v-text！"
},
})
</script>(2)、v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
(3)、v-bind
v-bind指令用于实现单向动态数据绑定。
前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。
(4)、v-on
v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)
Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。
(5)、v-for
v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for， 它需要结合着in或者of来使用。
for循环普通数组
(6)、v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
(7)、v-if和v-else
v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。
v-if的使用一般有两个场景：
1.通过条件判断展示或者隐藏某个元素或者多个元素；
2.进行视图之间的切换。
(8)、v-show
v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。
带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。
5.事件修饰符
v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。常用的事件修饰符如下表所示：
键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：
实例：监听回车键事件
<input @keydown.enter="login"> 6.计算属性与监听属性
概述：
为了让模板的语法看起来更加的简洁，同时不影响代码和内容的可用性，Vue.js框架提出了计算属性和监听属性。
1、计算属性 computed
一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：
下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{reverseMsg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
},
computed:{
reverseMsg(){
return this.msg.split("").reverse().join("")
}
}
})
</script>
</body>
</html>2、监听属性 watch
Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.tip {
color: red;
font-size: 14px;
}
</style>
<body>
<div id="app">
￥<input type="text" placeholder="请输入借款金额" v-model.number="money">
<p class="tip">{{tip}}</p>
</div>
<script src="../js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
money: "",
tip: ""
},
watch: {
money(newVal, oldVal) {
if (newVal > 1000) {
this.tip = "单笔借款金额最高￥1000";
}else{
this.tip = "";
}
}
}
})
</script>
</body>
</html>总结
本文主要讲解了创建Vue.js 的模板、data 数据、methods方法、生命周期、常用指令、事件修饰符以及计算属性与监听属性等内容，通过本章的学习，读者对于Vue.js的基础特性有了深入的了解，应该重点掌握Vue实例中data数据、methods方法和computed 计算属性的定义，能够使用v-bind实现单向数据绑定、使用v-model进行双向数据绑定、使用 v-on 进行事件绑定，并能够使用事件修饰符如.prevent阻止默认事件行为，使用.stop阻止事件冒泡，以及使用v-bind 绑定样式。
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
