没有合适的资源？快使用搜索试试~ 我知道了~

文库首页行业研究行业报告Vue04.pdf

Vue04.pdf

需积分: 9 0 下载量 82 浏览量 2022-09-06 08:59:33 上传评论收藏 1.99MB PDF 举报

温馨提示

试读

16页

Vue04.pdf

资源推荐

资源详情

资源评论

明日 05.21 加课一天

关于晚间: 有问题尽量在 22:30 之前发, 大概率 10点就睡了

大概率在第一节课下课统一回复

复习

配置项

data: 用于存储数据, 这里的数据可以全局使用

当数据发生变化时, 会自动更新相关DOM元素

methods: 用于存储各种方法

方法中的this 是当前vue 对象 -- 详见 vue01 的 this

关于方法的自定义传参默认 -- 复习 Day01 的方法部分

computed: 计算属性

特点 : 在使用时不需要 () 能自动触发

注意 : 不适合事件触发的函数, 因为事件触发的函数必然是手动触发

指令 : 就是 vue 提供的一套属性, 都是 v- 开头

v-text: innerText

v-html: innerHTML

v-show: 就是css的display:none

v-if: 删除DOM元素实现隐藏

v-else, v-else-if

v-for: 循环遍历

v-for="值 in/of 数组"

v-for="(值, 序号) in/of 数组"

支持遍历数字 v-for="值 in 数字"

v-on: 事件绑定

原生: onclick , vue是 v-on:click

简化: @

v-bind: 属性绑定

:属性名="JS代码"

v-model: 双向数据绑定

方向1: 传统把data中的数据传递到 DOM元素里

方向2: 必须是Form表单元素才能和用户交互, 用户修改DOM元素,可以同步更新数据项

v-pre : 原样显示代码, 特指 {{}}

v-once : 一次性, 首次渲染之后, 后续数据变化不会刷新DOM

特殊属性:

key: 唯一标识, 当数组发生增删操作时, 提高重新渲染的效率, 复用已存在的元素

作业

<div>

<input

@keyup.enter="

todoList.push(kw);

kw = '';

type="text"

placeholder="请输入待办事项"

v-model="kw"

<button

:disabled="kw == ''"

@click="

todoList.push(kw);

kw = '';

确定

</button>

<ul>

</li>

</ul>

<div v-show="todoList.length == 0" class="warning">暂无待办事项</div>

</div>

</template>

export default {

methods: {

// 方法参数: 接收来自HTML的值

removeTodo(i) {

// JS代码的语法要求: 用 this 从当前对象取值

this.todoList.splice(i, 1);

data() {

return {

todoList: ["吃饭", "睡觉", "打亮亮"],

// 输入框的值: 通过双向绑定捆绑数据

kw: "",

};

</script>

.warning {

background-color: orange;

width: 200px;

text-align: center;

line-height: 40px;

color: white;

border-radius: 4px;

}

自定义指令

</style>

<div>

<ul>

<li v-textH="'<h1>Hello World</h1>'"></li>

</ul>

</div>

</template>

export default {

// directive: 指令

directives: {

textH(sui, bian) {

sui.innerText = bian.value;

// v-color="'purple'"

color(el, bindings) {

// el: 参数1, 代表当前元素

// bindings: 参数2, 绑定的值

console.log("bindings:", bindings);

el.style.color = bindings.value; //value是什么,详见后台打印

// v-red

red(suibian) {

suibian.style.color = "red";

// v-green: v- 固定前缀 green 名称

green(el) {

// 参数1: 指令所在的元素

console.log("el:", el);

console.dir(el);

el.style.color = "green";

};

指令

案例

</script>

<div>

<br />

<br />

</div>

</template>

export default {

directives: {

// DOM元素: 先创建 -> 设置各种属性 -> 添加到页面上显示

// 详见 : 案例.html

focus: {

// 自选生命周期, 来触发函数

inserted(el) {

// insert: 插入, 代表 DOM元素插入到页面上显示

el.focus();

// 指令所在的元素, 添加到页面上的时候, 触发焦点

// 下方写法: 是指令的语法糖写法, 其触发时机是 DOM元素创建和更新时

// focus(el) {

// console.dir(el); // 找原型 -> 原型 -> 原型里, 有focus方法,

// // 作用: 让DOM元素获取焦点

// el.focus();

// },

};

</script>

</style>

<!DOCTYPE html>

<head>

剩余15页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

就一把蒲扇

粉丝: 10
资源: 9

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

Vue04.pdf

Vue2.x和Vue3.x面试常问知识点-面试题-JackieDYH - CSDN博客.pdf

vue.js教程.pdf

一种基于Vue.js和Django的权限控制方法及系统.pdf

我如何使用 Django + Vue.js 快速构建项目.pdf

Vue.js 实战.pdf

Vue.js 技术揭秘.pdf

Vue 讲义.pdf

Vue期末.pdf

Vue03. Vue.js 高级开发.pdf_前端学习资料

VUE面试.pdf

Vue02.pdf

Vue03.pdf

Vue09.pdf

Vue05.pdf

Vue06.pdf

Vue07.pdf

Vue01.pdf

Vue08.pdf

相关实用应用程序（Windows可用）

免费可用的ChatGPT网页版.zip

ChatGPT使用总结：150个ChatGPT提示词模板（完整版）

chromedriver-win64.zip

全国计算机二级WPSoffice精选350道选择题题库（含答案）.pdf

李飞飞自传 我看见的世界 The World I see

农村公交与异构无人机协同配送优化

哈尔滨工业大学-ChatGPT调研报告-2023.3.6-94页.pdf

4个亲测好用的ChatGPT4渠道

基于LSTM的财务因子预测选股模型.zip

基于LSTM的多因子选股策略.zip

最新资源

李飞飞自传我看见的世界 The World I see