【Vue】快速入门

Vue入门课程

• Vue入门课程
  • 快速入门
  • 课程安排
  • 学习前提
  • VUE基础
    • 第一个vue程序：导入Vue
    • 导入包体vue.js
  • el：挂载点
  • data:数据对象
  • methods：定义方法
  • Vue本地应用
• Vue指令（API）
  • v-text
  • v-html
  • v-on
  • v-show
  • v-if
  • v-bind
  • v-for
  • v-on补充————传自定义参数、事件修饰符
  • v-model
• 结语

快速入门

• 首先Vue.js是一个前端框架

• Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

  Vue 只关注视图层， 采用自底向上增量开发的设计。

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

  学习起来非常简单

课程安排

• Vue基础
• 本地应用
• 网络应用
• 综合应用

学习前提

• HTML
• Javascript
• css
• ajax

VUE基础

• 他是一个javascript框架

• 简化dom操作

• 响应式数据驱动

  即页面由一堆数据构成，页面发生变化，数据也会变化

  数据可直接操作页面

第一个vue程序：导入Vue

• vue的作者是一个中国人，所以相应的官方文档对国人是相当友好的

• 这里是vuejs的官方网站：点击这里

  这个网站将是我们学习vue的好帮手

导入包体vue.js

• 官网有两个版本，一个是开发环境版本，一个是生产环境版本

• 开发环境版本：可以理解为完整版本的jquery，适合学习用

• 生产环境版本：可以理解为mini版本的jquery，适合开发用

• 代码解释：

  div#app标签里的{{ message }} 大括号可以把它理解为：插值表达式！data里的message数据会被封装到这个div里面

  var app = new Vue 创建一个vue实例

  data：{} data中的数据是实例使用到的数据，里面写需要的数据内容

  message:"your contents" message里面的内容会渲染在页面

• Vue是如何知道他要操作那个元素的呢？
  看vue里面的 el 属性，他的值是不是 #app 啊，vue就是通过这种方式绑定标签的

• 步骤

  • 导入开发版本的vue.js
  • 创建vue实例对象，设置el和data属性
  • 使用简洁的模板语法将数据渲染到页面上

el：挂载点

• el的功能是：设置挂载点

• 通过css选择器设置Vue实例管理的元素

  设置完毕之后，el命中的元素内部，用大括号修饰的部分，就会被data里面的数据所替换

• Vue实力的作用范围是多少呢？

  假如我们把大括号写在挂载点标签的外面，或者el挂载点标签内的标签的内部，他是否可以生效呢？

  答：不行，不能正常生效，Vue实力的作用范围限于命中的元素及其内部的后代元素

• 是否可以使用其他的选择器？

  比如id、class、标签，都是css里面的选择器，这些是否可以使用呢？

  答：可以，但是一般实际开发的时候我们使用id选择器，因为一般情况下，每个标签的id都是唯一的如果使用类选择器，会造成语义不清晰的问题

• 是否可以设置其他的DOM元素呢？

  页面的标签元素并不只有div，我们是否可以使用其他标签呢？

  答：可以，但是需要注意的是Vue的挂载只支持 双标签，所有的双标签都支持吗？也并不全支持，比如body和html标签，我们建议使用div标签作为挂载点因为它没有额外的样式

• 注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

• 看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

data:数据对象

• 注：数据对象里面的不同Vue函数之间使用逗号分割！复杂类型数据的渲染遵循js的语法即可

• message："文本"

• school：{key:"value",key2:"value2"}对象，一个对象里的不同键值之间使用逗号隔开，调用方法：{{school.key}}

• campus:["1","2"] 数组，调用方法示例：{{ campus[0] }}

• 注意！上面的message、school等属性都是自定义属性，不是非得写message，你可以写成food等其他属性，调用的时候记得要互相匹配

methods：定义方法

Vue本地应用

• 什么是Vue指令？

  以vue-开头的指令我们称为vue指令

Vue指令（API）

• 在这里查看官网提供的Vue指令API参考！———— ここです！

v-text

• 设置标签的文本值
• 写在标签的内部<h2 v-text="message+'字符串的拼接'"></h2>
• 可等同这样写：<h2>{{message+"字符串的拼接"}}</h2>

v-html

• 更新元素的 innerHTML
• <div v-html="content"></div>
• 上面的div标签的innerHTML会被替换掉vue data里面的content属性的值

v-on

• 为元素绑定事件，参考官方文档

• 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

• 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

• v-on:click="function name"

• v-on:mouseenter="function name"

• 简单示例：

  <div id="app"><button type="button" value="events" v-on:dblcick="fctname"</div>

  var app = new Vue({el:"#app", method:{ fctname:function(){} }})

• v-on:有一个缩写就是@，效果等同于 v-on:
  示例：@click

• this.food+="也可以拼接字符串"，food是定义在data里面的数据，this指向调用该函数的元素

v-show

• 根据表达式的真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。
• 后面的值跟布尔值，但是直接把值写在标签里面不方便更改，所以一般我们把这个值定义在vue实例的 数据里面，或定义在方法里面，会更加方便操作
• v-show="yourDisplayCtrlFunctionName"

v-if

• 也可以用这个来控制元素的显示与隐藏

  它操纵的不是样式，而是直接操纵DOM元素

  如果是false，与v-show不同的是，v-if 会直接从 Dom树 中删除/移除该标签元素

  因此，假如是需要频繁切换显示状态的，我们用v-show比较好

  因为，直接操作 DOM树 对性能的消耗会更大

• 根据表达式的真假值来有条件地渲染元素。

  在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提取它的内容作为条件块。

  当条件变化时该指令触发过渡效果。

• 当和 v-for 一起使用时，v-if 的优先级比 v-for 更高。

• v-if 的使用相当灵活

  其可以写成这样：v-if=" 5>10 "这样的直接判断的语句

v-bind

• 专门用来操作元素属性

• 比如：

  图片的地址、title、class 等

• 语法：

  v-bind:属性名="表达式"

  示例：

  v-bind:src="srcOfyourdata"

• 额外小知识：

  <div class="abc:ABC"></div>

  上面的代码有这样的作用： div 的class的值abc是否生效，取决于ABC的布尔值

v-for

• 根据数据动态生成列表结构 ———— 参考

• v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

• 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

  下面的示例请根据官网查看，不做赘述：

  <li v-for="(item, index) in items">{{ parentMessage }} - {{ index + 1 }} - {{ item.message }}</li>

• 额外小知识：

  对象数组：abc[{abc1:v1},{abc2:v2}]

v-on补充————传自定义参数、事件修饰符

• 传递自定义参数

• 我们之前学过function(e){} 这种函数

  那么v-on怎么使用这种自定义参数呢？很简单，请看示例：

  @click="yfn(e)"

  methods:{yfn:function(e){ },}

  按如上实例参考使用就可以啦~

• 事件修饰符比如键盘的抬起操作时 我们判断抬起的键值是否是enter键：

  语法是：.e，

  <input type="text" @keyup.enter="yfn"

v-model

• 获取或设置表单元素的值（双向数据绑定）

  什么叫做双向数据绑定呢？

  data里面的message会同步到表单标签内的v-model="message"里面的message，当我们更改了表单元素的值之后呢，他也会利用message标签传递到data里面的message

  但不要搞错了，它不修改dom元素，他只是储存和传递，当别的标签使用v-text调用message，会发现显示出来的message数据和标签内的数据是相同的

  而写在data里面的message数据是不会发生变化的

结语

• 学到这里，基本上vue就算是入门了，但是也仅仅是简单的使用，更多深入的教学本文不再涉猎，更多信息可以到官网查看，很多js函数vue里面也是能用的，本文也只是作为一篇学习笔记来记录

  最后，感谢您的观看