Vue-基础语法01

Vue是什么

• 用于构建用户界面的渐进式框架
• 声明式渲染组件系统客户端路由集中式状态管理项目构建
• vue 的核心库只关注视图层

Vue有哪些优点？

• 易用、灵活、高效
• 简单易上手

如何利用Vue将hello world 渲染到页面上

1、需要提供标签用于填充数据
	注意： 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据
2、引入vue.js库文件
	注意：一定要先引入Vue文件 在使用Vue语法  因为存在作用域的问题
3、使用vue的语法做功能
	new Vue()  创建一个Vue的实例  
	在构造函数中以对象的形式做一些配置  
4、利用Vue将数据渲染到页面上
	数据写在data 里面

把字符串渲染到页面上有哪些方式？

1.利用原生js拼接字符串
2.利用模板引擎拼接
3.利用Vue插值语法
4.文档碎片   document.createDocumentFragment
5.利用es6 `` 反引号拼接字符串

指令是什么？

1.指令就是一个自定义属性
2.Vue中指令都是以 v-  开头

什么是数据响应式？

• 当数据改变的时候页面内容跟随者改变

什么是双向数据绑定

• 当数据发生变化的时候，视图也就发生变化
• 当视图发生变化的时候，数据也会跟着同步变化

双向绑定的使用场景

• v-model是一个指令，限制在 input、select、textarea、components（组件） 中使用

Vue中通过哪一个指令实现双向绑定？

• v-model

M、V、VM 分别代表什么？

• M：model

   数据层 Vue 中 数据层 都放在 data 里面
  

• V：view 视图

   Vue 中 view 即 我们的HTML页面
  

• VM：（view-model） 控制器 将数据和视图层建立联系

   vm 即 Vue 的实例 就是 vm
  

Vue中 如何绑定事件？

• 通过v-on 绑定事件

• v-on 可以简写 @

vue中 事件如何调用？

• 直接绑定函数名称调用

  <button v-on:click='handle1'>点击</button>
  

• 调用函数的形式

  <button v-on:click='handle1()'>点击</button>
  

vue中 事件对象 怎么使用

• 通过默认的事件参数

• 通过$event 使用

Vue中 常用的事件修饰符有哪些？

• .stop 阻止冒泡

• .prevent 取消默认事件

怎么自定义按键修饰符

• 通过Vue.config.keyCodes自定义按键修饰符别名
• Vue.config.keyCodes.f5 = 116;
• 注意 116 对应键盘的keycode 值
• f5可以自定义任何名字

vue 中怎么操作属性

• v-bind 指令被用来响应地更新 HTML 属性

• v-bind:href 可以缩写为 :href

v-bind 和 v-on的区别

• v-bind 绑定属性

• v-on 绑定事件

如何绑定一个对象

1. 通过v-bind:class = { 键： 值 }
2. 键 代表一个类名 如果这个值 为true 表示 显示这个类名
3. 如果这个值 为false 表示 不显示这个类名

如何绑定一个数组

• 通过v-bind:class =[ 值1，值2 ]

对象绑定和数组绑定可以混用吗？

• 数组中可以存储任何数据类型
• 对象的值中也可以存储任何数据类型

绑定数组和绑定对象有什么区别

• 绑定对象的时候对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
• 绑定数组的时候数组里面存的值 是data 中的数据

v-if 使用场景

• 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

v-show 和 v-if 区别

• v-show本质就是标签display设置为none，控制隐藏

• v-if是动态的向DOM树内添加或者删除DOM元素

vue中循环是哪一个指令？

• v-for = “(item,index) in 数组名”

• Item 代表数组中的每一项 index 代表索引

key的作用

• key来给每个节点做一个唯一标识

• key的作用主要是为了高效的更新虚拟DOM

怎么遍历对象

• v-for = “(item,key,index) in 对象名”
• Item 代表对象中的每一项
• Key 代表对应的键名
• Index 代表对应的 索引

v-if 和 v-for 搭配使用

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

如何将data 中的数据渲染到页面上

• 利用循环遍历 list

• 然后把list 中的数据渲染到页面上