首页 > 其他 > 详细

2020.7.2

时间:2020-07-02 14:13:20      阅读:37      评论:0      收藏:0      [点我收藏+]

今日学习内容:

# Vue.js:

## el 挂载点

技术分享图片
  - el 是用来设置 Vue 实例挂载 (管理)的元素

  - Vue 会管理 el 选项 命中的元素 及其内部的 后代元素

  - 可以使用其他的选择器(el:".app" 或 el:"div"),但是建议使用 ID 选择器 (el:"#app")

  - 可以使用其他的双标签,但是不能使用 HTML 和 BODY 
el 挂载点

## data 数据对象

技术分享图片
  - Vue 中用到的数据定义在 data 中

  - data 中可以写 复杂类型 的数据

  - 渲染复杂类型数据时,遵守 js 的语法即可
data 数据对象

## 本地应用

### 内容绑定,事件绑定(v-text、 v-html、 v-on基础)

1. v-text

技术分享图片
  - v-text 指令的作用是:设置标签的内容(textContent)

  - 默认写法会替换全部内容,使用 差值表达式 {{}} 可以替换指定内容

  - 内部支持写表达式
v-text 定义

2. v-html

技术分享图片
  - v-html 指令的作用是:设置元素的 innerHTML

  - 内容有 html 结构会被解析为 标签

  - v-text 指令无论内容是什么,只会解析为 文本

  - 解析文本使用 v-text,需要解析 html 结构使用 v-html
v-html 定义

3. v-on

技术分享图片
  - v-on 指令的作用是:为元素绑定事件

  - 事件名不需要写 on

  - 指令可以简写为 @

  - 绑定的方法定义在 methods 属性中
v-on 定义

4. 总结:

技术分享图片
  - 创建 Vue 实例时,(el 挂载点)、(data 数据)、(methods 方法)

  - v-on 指令的作用是绑定事件,简写为 @
  - 方法中通过 this ,关键字获取 data 中的数据

  - v-text 指令的作用是:设置元素的 文本值,简写为{{}}

  - v-html 指令的作用是:设置元素的 innerHTML
总结

### 显示切换,属性绑定(v-show、 v-if、 v-bind)

### 列表循环,表单元素绑定(v-for、 v-on补充、 v-model)

 

2020.7.2

原文:https://www.cnblogs.com/cntian/p/13224096.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!