高考报名时间2022年11月1日还剩 天 距离2023年6月7日高考还有 天
栏目分类:
子分类:
返回
名师互学网用户登录
名师互学网
快速导航关闭
当前搜索
当前分类
前沿技术 软件开发 系统运维 产品运营 生活办公 面试经验 考试题库
子分类
人工智能 大数据 云计算 区块链 物联网 深度学习 机器学习 NLP 计算机视觉 语音识别 其他 大数据系统 数据可视化 数据挖掘与分析 其他 Docker/k8s 虚拟化 云平台 其他 基本原理 数字货币 智能合约 EOS应用 其他 通讯技术 嵌入式开发 单片机 物联网应用 HarmonyOS 其他 后端开发 Web开发 移动开发 游戏开发 Python Java 架构设计 C/C++/C# PHP .Net Go语言 R语言
实用工具
学习工具 小学数学练习 字帖生成 在线画板 函数绘制 拼音字母表 在线词典 黄历查询 亲戚关系计算 安全期计算 中国历史 Excel函数 模拟请求 json格式化 浏览器指纹
热门搜索
路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Vue2.5 零基础开发去哪儿网实战(二)

Vue.js 更新时间： 发布时间： IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue2.5 零基础开发去哪儿网实战(二)

1  最简单的案例

  • 下载安装

  • 原生实现打印



1.1 创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

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

当创建一个 Vue 实例时，你可以传入一个选项对象.
本教程主要描述的就是如何使用这些选项来创建你想要的行为.

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成.

现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外).

回到案例演示,若使用Vue.js 该如何实现打印呢?


  • 无问题,正常打印


1.2 数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性.
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值.

// 我们的数据对象var data = { a: 1 }// 该对象被加入到一个 Vue 实例中var app = new Vue({  data: data
})// 获得这个实例上的属性// 返回源数据中对应的字段app.a == data.a // => true// 设置属性也会影响到原始数据app.a = 2data.a // => 2// ……反之亦然data.a = 3app.a // => 3

当这些数据改变时，视图会进行重渲染.
值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性
比如：

app.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值.
比如：

data: {  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化.

var obj = {  foo: 'bar'}Object.freeze(obj)new Vue({  el: '#app',  data: obj
})
  
{{ foo }}

  
  Change it

  • 非接管区域内内容,并不感冒它.


  • 而会原封不动输出.


  • 最古老的直接操作DOM的定时操作.


  • Vue.js 版本代码,不需要再管 dom 操作,而是将注意力都放在对于数据的管理;
    数据是什么,页面也就展示什么.

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

var data = { a: 1 }var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => truevm.$el === document.getElementById('example') // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) {  // 这个回调将在 `vm.a` 改变后调用})

3 开发TodoList（v-model、v-for、v-on）3.1 列表渲染3.1.1  用 v-for 把一个数组对应为一组元素

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。


  
    {{ item.message }}  
var example1 = new Vue({  el: '#example-1',  data: {    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

Foo
Bar

在 v-for 块中，我们拥有对父作用域属性的完全访问权限.
v-for 还支持一个可选的第二个参数为当前项的索引.


  
    {{ parentMessage }} - {{ index }} - {{ item.message }}  
var example2 = new Vue({  el: '#example-2',  data: {    parentMessage: 'Parent',    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

Parent - 0 - FooParent - 1 - Bar

你也可以用 of 替代 in 作为分隔符，因为它是最接近 Javascript 迭代器的语法：

3.1.2  一个对象的 v-for
也可用 v-for 通过一个对象的属性来迭代.
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 Javascript 引擎下是一致的.

  
    {{ value }}  
new Vue({  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
  • 也可以提供第二个的参数为键名：
  {{ key }}: {{ value }}
  • 第三个参数为索引
  {{ index }}. {{ key }}: {{ value }}
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 Javascript 引擎下是一致的。
3.1.3  key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：
  
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升.
因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联.
不要使用对象或数组之类的非原始类型值作为 v-for 的 key。用字符串或数类型的值取而代之.
3.2 回到案例
  • 最初文件

  • 最初效果

  • Vue版实现同效

下面开始逐步实现 todolist功能
3.3 事件处理3.3.1  监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 Javascript 代码。
  Add 1
  
The button above has been clicked {{ counter }} times.
var example1 = new Vue({  el: '#example-1',  data: {    counter: 0
  }
})
3.3.2 事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 Javascript 代码写在 v-on 指令中是不可行的,因此 v-on 还可以接收一个需要调用的方法名称.
  
  Greet
var example2 = new Vue({  el: '#example-2',  data: {    name: 'Vue.js'
  },  // 在 `methods` 对象中定义方法
  methods: {    greet: function (event) {      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})// 也可以用 Javascript 直接调用方法example2.greet() // => 'Hello Vue.js!'
3.4 回到案例
来试试绑定点击事件~



3.5  表单输入绑定3.5.1  基础用法
可用 v-model 指令在表单 、