一、什么是vue
vue 是一种用于构建用户界面的 JavaScript 框架，主要用于开发 Web 应用程序。它是 Vue.js 框架的文件扩展名，默认包含 HTML、CSS 和 JavaScript 代码块，并使用 Vue.js 提供的语法来定义应用程序的交互式组件。
使用vue.js的好处
1.轻量级框架
是一个构建数据的视图集合,大小只有几十kb
2.简单而且易学
由国人开发，没有语言障碍，简单易学
3.双向数据绑定以及组件化
Vue.js 支持数据的双向绑定，当数据发生改变时，Vue.js 自动更新视图，减少了页面更新的时间和代码量，组件化开发，能够有效提高代码的复用性和可维护性。
二、如何使用vue
基本框架
(1).引入vue.js
(2).创建根节点
(3).初始化vue实例，绑定根节点
1.首先打开Visual Studio Code，新建一个HTML页面，然后引入Vue.js
<script src="../js/vue.js"></script>
2.在<body></body>标签内创建一个根节点
3.在<script></script>标签内初始化一个vue实例，绑定根节点，其中methods方法中可以写函数
三、vue的简单案例
1.data数据对象
概述：data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，让data的属性能够响应数据变化。var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，当data内的数据进行变动，视图层就会同步自动刷新。
data数据对象有以下两种写法：
(1.)对象（Object）的形式
(2.)函数（Function）的形式
2.methods方法
methods方法用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。在methods方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例。
3.常用到的vue指令
(1.)v-bind指令
作用：实现单向动态数据绑定，用于绑定一个或多个属性值，或者向另一个组件传递属性值，例如图片的src、链接的href、动态绑定一些类、样式等，这个案例用到的是v-bind单向动态绑定图片的src，v-bind可简写成“:”
(2.)v-on指令
作用：绑定事件监听，在普通元素上，可以监听原生的DOM事件（如click、dblclick、keyup、mouseover等），v-on表达式是一个方法名，这些方法以函数形式定义在vue实例的methods方法中，以函数的形式被调用，v-on可简写成“@”
(3.)列表渲染指令 v-for
作用：是Vue.js的循环语句，需要结合in或of来使用
语法格式：v-for="(item,index) of/in 数组名"，其中index是索引，item是项，例如存放下面图片的数组名称是images
(4.)v-model指令
作用：实现表单元素和数据的双向动态数据绑定，通常用在表单类元素上(如input、select、textarea等)。双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
v-model有3个修饰符，分别是lazy、number、trim
v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。
默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。案例2它用到了v-model的number修饰符。
trim修饰符则是可以去除输入内容左右两边的空格。
(4.)计算属性
计算属性，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，返回最终计算的结果。
与methods方法的区别在于计算属性是基于自身的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小
2.点击选中图片就将它显示出来
效果视频
图片转换
代码：
这里设置了图片的样式，创建根节点是在<body>标签里的。
解释一下代码：先引入vue.js文件，然后写上样式，第二步在你创建的根节点那里，动态的把图片的路径绑定，这个是作为一个大的盒子，当你点击图片的时候，它会显示在大盒子中，然后再需要遍历循环的数组里使用v-on指令加一个点击事件onChange()，监听点击图片的行为，点击时通过下标获取到图片的路径，将图片显示出来。
3.输入各科的分数然后自动算出总分跟平均分
效果视频
自动算平均值
代码：
(1).表单样式
(2).表格的基本格式
使用v-model双向动态数据绑定的number修饰符，可以在你输入数字的时候将字符串转为数字类型，进行运算
(3).概述：为了让模板的语法看起来更加的简洁，同时不影响代码和内容的可用性，Vue.js框架提出了计算属性和监听属性。
下面用到了计算属性computed，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果，当一个结果受多个值影响时候就需要用到computed，函数与函数之间用英文逗号分隔。
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
