vue.js 学习笔记

举报
knightaa 发表于 2021/04/10 23:01:59 2021/04/10
【摘要】 初步学习1、vue 基础1.1 vue 简介1、javascript框架2、简化DOM操作3、响应式数据驱动1.2 第一个vue程序1、导入开发版本的Vue.js;2、创建Vue实例对象,设置el属性和data属性;3、使用简介的模板语法把数据渲染到页面上;1.3 el 挂载点el 挂载点:el是用来设置Vue实例挂载(管理)的元素;Vue实例的作用范围是什么呢?Vue会管理el选项命中的元...

初步学习
1、vue 基础
1.1 vue 简介

1、javascript框架
2、简化DOM操作
3、响应式数据驱动
1.2 第一个vue程序

1、导入开发版本的Vue.js;
2、创建Vue实例对象,设置el属性和data属性;
3、使用简介的模板语法把数据渲染到页面上;
1.3 el 挂载点

el 挂载点:
el是用来设置Vue实例挂载(管理)的元素;

Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素;

是否可以使用其他的选择器?
可以使用其他的选择器,但是建议使用ID选择器;

是否可以设置其他的dom元素呢?
可以使用其他的双标签,不能使用HTML和body
1.4 data:数据对象

Vue中用到的数据定义在data中;
data中可以写复杂类型的数据;
渲染复杂类型数据时,遵守js的语法即可;
2、本地应用

通过Vue实现常见的网页效果;
学习Vue指令,以案例巩固知识点;
Vue指令指的是,以v-开头的一组特殊语法;
2.1 v-text指令

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

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

v-on指令的作用是为元素绑定事件;
事件名不需要写on;
指令可以简写为@;
绑定的方法定义在methods属性中;

v-on补充:
事件绑定的方法写成函数调用的形式,可以传入自定义参数;
定义方法时需要定义形参来接收传入的参数;
事件的后面跟上.修饰符可以对事件进行限制;
.enter 可以限制触发的按键为回车;

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。