vue基础简介以及本地应用 --one

一、Vue基础

1.Vue简介

​ （1）JS框架

​ （2）简化Dom操作

​ （3）响应式数据驱动

2.第一个Vue程序

​ 文档：https://cn.vuejs.org

​ （1）导入开发版本的Vue.js

​ （2）创建Vue实例对象，设置el属性和data属性

​ （3）使用简洁的模板语法把数据渲染到页面上

3.el 挂载点

​ （1）Vue实例的作用范围是什么呢？

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

​ （2）是否可以使用选择器

​ 可以使用，建议使用ID选择器

​ （３）是否可以设置其他的DOM元素

​ 可以使用其他的双标签，不能使用HTML和BODY

4.data 数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂数据类型
• 渲染复杂类型数据时,遵守JS的语法即可

二、本地应用

简介

• 用vue开发网页效果
• 学习Vue指令,以案例巩固知识点
• Vue指令指的是,以v-开头的一组特殊语法

1. 内容绑定,事件绑定

• v-text

• 

  • v-text 指令的作用是:设置标签的内容(textContent)
  • 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
  • 内部支持写表达式

• v-html

• 

  • v-html指令的作用是:设置元素的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么,只会解析为文本
  • 解析文本使用v-text,解析html结构使用v-html

• v-on

• 

  • v-on指令的作用是:为元素绑定事件
  • 事件名不需要写on
  • 指令可简写成@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中的数据

2. 显示切换,属性绑定
3. 列表循环,表单元素绑定