- 博客(24)
- 收藏
- 关注
RSS订阅原创 Vue：v-pre
v-pre显示原始信息跳过编译过程跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编译加这个指令可以加快渲染 <span v-pre>{{ this will not be compiled }}</span> <!-- 显示的是{{ this will not be compiled }} --> <span v-pre>{{msg}}</span> <!-- 即使data里面定义
2020-09-30 18:15:22
64
原创 Vue: v-html
v-html用法和v-text 相似 但是他可以将HTML片段填充到标签中可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。<div id="app"> <p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 --> &
2020-09-29 18:00:55
1154
原创 Vue ：v-text
v-textv-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题如果数据中有HTML标签会将html标签一并输出注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值<div id="app"> <!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法 一般属性中不加 {{}} 直接写 对应 的数据名 --&
2020-09-28 21:36:35
827
原创 Vue: v-cloak & v-text
v-cloak防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </style><body> <div id="app"> <!-- 2、 让带有插值 语法的 添加 v-cloak 属性
2020-09-27 19:51:50
95
原创 Vue-时间修饰符
<html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{num}}</div> <div v-on:click='handle0'> <button v-on:click.stop='handl
2020-09-26 10:37:56
396
原创 Vue-案件修饰符
<html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <form action=""> <div> 用户名： <input type="text" v-on:keyup.delete='clea
2020-09-26 10:29:37
140
原创 Vue-事件
在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" />组件的 methods 选项在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问通过内联方式绑定事件处理函数<组件 @事件名称="fn" /><script>new Vue({ ...,
2020-09-24 18:56:26
68
原创 Vue-指令- 指令修饰符
指令修饰符一个指令可以包含的内容包括：指令名称指令值指令参数指令修饰符<组件 指令:参数.修饰符1.修饰符2="值" />.lazy取代 input 监听 change 事件.number输入字符串转为有效的数字.trim输入首尾空格过滤...
2020-09-23 18:19:11
112
原创 Vue-指令-单向数据流
单向数据流通过上面的知识点和案例，我们可以看到，当数据更新的时候，页面视图就会更新，但是页面视图中绑定的元素更新的时候，对应的数据是不会更新的<input type="text" :value="title" />我们称为：单向数据流 数据 -> 视图在 vue 中，还有一种双向数据流绑定的方式...
2020-09-22 19:08:31
65
原创 Vue -指令-循环与列表
循环与列表v-for根据数据循环渲染 v-for 指令所在的元素及其子元素可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)<div v-for="(item, index) in items"></div><div v-for="(val, key) in object"></div><div v-for="(val, name, index) in object">
2020-09-21 18:06:45
68
原创 Vue -指令-逻辑处理
逻辑处理v-show根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）适用于状态切换比较频繁的情况v-if根据表达式的值（布尔值），创建或销毁元素适用于状态切换不频繁的情况v-else / v-else-if与 v-else 配合...
2020-09-20 10:56:10
156
原创 Vue- 指令-内容输出
Vue- 指令-内容输出通过 {{}} 我们可以很方便的从模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 {{}} ，vue 提供了几个指令来解决这个问题指令中的表达式不需要使用 {{}}v-text<p v-text="title"></p>弊端：v-text 会填充整个 innerHTMLv-cloak<p v-cloak>{{title}}</p>需要配合 css 进行处理<styl
2020-09-19 16:33:01
755
原创 Vue 跑马灯效果
<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue.js"></script></head><body&
2020-09-18 16:33:36
39
原创 Vue脚手架
Vue.js文章目录Vue.js脚手架安装创建项目目录结构单文件组件组成脚手架Vue 提供了一个脚手架工具，帮助我们快速搭建本地项目：vue-clihttps://cli.vuejs.org/zh/安装npm install -g @vue/cli# ORyarn global add @vue/cli创建项目vue-cli 提供了两种使用方式命令行UI# 命令行vue create 项目名称# UIvue ui运行命令以后，根据提示进行选择目录结构- no
2020-09-17 17:33:16
33
原创 Vue指令-属性绑定
属性绑定v-bind绑定数据（表达式）到指定的属性上，<div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称<div id="app"> <div v-bind:id="'box1'"></div> <div v-bind:id="myId"></div></div><script> new Vue({ el: '#app', d
2020-09-17 17:31:30
424
原创 v-cloak的学习
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none;
2020-09-10 20:13:42
63
原创 Vue 的基本代码
<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1. 导入Vue 的包 --> <script src="./lib/vue.js"></scr
2020-09-10 20:11:41
1049
原创 JS 简单与复杂类型传参
1.简单类型传参 函数的形参也可以看做是一个变量，当把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。 function fn(a) { a++; console.log(a); } var x = 10; fn(x); console.log(x)； 运行结果如下：2. 复杂数据类型传参 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把
2020-09-09 18:47:17
405
原创 css font总结
font总结属性表示注意点font-size字号我们通常用的单位是px 像素，一定要跟上单位font-family字体实际工作中按照团队约定来写字体font-weight字体粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位font-style字体样式记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normalfont字体连写1. 字体连写是有顺序的 不
2020-09-09 18:30:06
81
原创 vue 作用域插槽用法
<html><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css"> .current { color: orange; }</style><body> <div id="app"> <fruit-list :list='list
2020-09-08 18:57:51
145
1
原创 jQuery的extend方法
<html><head> <meta charset="UTF-8"> <title>jQuery的extend方法</title> <script> function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类
2020-09-04 17:54:37
53
原创 jQueryDOM操作相关方法
<html><head> <meta charset="UTF-8"> <title>jQueryDOM操作相关方法</title> <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>--> <script src="js/njQuery-1.4.0.js"></script> &
2020-09-03 18:46:51
96
原创 jQuery : apply和call方法
<html><head> <meta charset="UTF-8"> <title>apply和call方法</title> <script> /* apply和call方法的作用: 专门用于修改方法内部的this 格式: call(对象, 参数1, 参数2, ...); apply(对象, [数组]);
2020-09-02 18:59:49
185
原创 jQuery的基本结构
<html><head> <meta charset="UTF-8"> <title>01-jQuery的基本结构</title> <script> /* 1.jQuery的本质是一个闭包 2.jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 3.jQuery如何让外界访问内部定义的局部变量 w
2020-09-01 18:49:11
217
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人