- 博客(17)
- 收藏
- 关注
RSS订阅原创 箭头函数的基本使用
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><script> // 箭头函数也是一中定义函数的方式 // 1、定义函数的方式：function /*const aaa=function (){ }*/ //2、对
2020-10-15 14:47:57
209
原创 编译的作用域
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 这里面isShow的值来自Vue实例里面的决定的，而不是组件里面的 因为这个组件是数据Vue实例里面的，所以首要选择的作用域是vu
2020-10-15 14:46:20
160
原创 vue中solt插槽的基本使用
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 第二步：要使用这个插槽的话就直接在组件的标签里面嵌套在插槽里面放什么内容就可以了--><!-- 但是你整体看的时候发现其实只
2020-10-15 14:44:47
355
原创 vue中v-model修饰符的使用
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 1、.lazy修饰符--> <!--在没有加.lazy修饰符的时候，是实时绑定更新的， 加入之后写完数据后，失去焦点或者回
2020-10-15 14:42:57
296
原创 vue中v-model结合chexbox类型
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- label的好处就是点框或者文字都能选中--> <!--这是chekbox单选框的中v-model的使用方法 <la
2020-10-15 14:41:25
255
原创 vue中v-model结合radio类型
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 1、 选男的时候绑定到数据里面的sex,选女也是一样的。2、而且使用v-model时不用使用name属性也可以让两个选项互斥3、当要选择默认
2020-10-15 14:40:29
1057
原创 vue中v-model的本质
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><!--v-model的原理：相当于两个指令的结合v-bind:value("message")v-on:input(message)(监听用户有没有输入东西)--><div id
2020-10-15 14:39:31
210
原创 vue数组的响应式
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"> 并不是所有的方法都可以做到响应式的 <ul> <li v-for="item in letter">{{item}}&l
2020-10-15 14:38:26
154
原创 v-for使用时添加key
<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"><!-- 添加key的作用主要是为了提高中间添加元素的性能，不然他就会按照最笨的办法进行插入--> <ul><!--
2020-10-15 14:37:07
225
原创 vue中计算属性的getter和setter
<div id="app"> <h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app', data: { firstName:'kobe', lastName:'bryant' }, computed:{
2020-10-08 19:03:34
322
原创 vue中计算属性computed和methods函数的对比
<div id="app"> <!-- 1、通过字符串直接拼接，一般不适用，语法过于繁琐--> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 2、直接定义methods函数--> <h2>{{getFullName()}}</h2> <h2>{{getFu
2020-10-08 19:02:30
236
原创 vue中的插值操作
1、mustache双大括号语法mustache语法中，不仅仅可以直接写变量，也可以直接写简单的表达式2、v-once指令在某些情况下可能不希望界面随意的跟随改变，这时就可以使用Vue指令1）此指令后面不需要跟任何表达式（比如之前的v-for后面是跟随一些表达式的）2）该指令表示元素和组件，只渲染一次，不会跟着数据的改变而改变。3、v-html指令运用指令可以对所给的url进行解析，从而变成正常的我们想要的那种形式，可以点击并跳转。4、v-text指令这个指令与mustache双大括号语法
2020-10-08 19:00:44
373
原创 vue中计算属性computed
简单的案例：将firstName和lastName结合起来并且中间还要加上空格<div id="app"><!-- 计算属性的作用是当要对输出的内容加以修改之后才输出的--><!-- 如果将firstName和lastName结合起来并且中间还要加上空格的话--> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2>
2020-10-08 18:58:58
553
原创 vue中v-bind动态绑定
v-bind指令除了内容需要动态绑定之外，我们元素的某些属性也需要动态的绑定，比如<img src=""/>或者<a href=""></a>里面的图片路径或者网址路径一定不是写死的，是需要随着请求来的数据而随之改变的。这就会用到我们的v-bind指令了。-- 正常的做法就是，使用v-bind指令--> <img v-bind:src="imgURL"> <a v-bind:href = "webURL">webstrom快
2020-10-08 18:56:52
391
原创 vue中事件监听v-on的基本使用
v-on参数当通过methods中定义方法，以供@click调用，需要注意参数问题，情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（）<!-- 1、 事件调用的方法没有参数--> <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button><!-- 2、 在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样
2020-10-08 18:54:26
677
原创 vue的初体验
安装方式：1、直接CDN引入：script src=“http://cdn.jsdelivr.net/npm/vue”>2、下载和引入开发环境：https://vuejs.org/js/vue.js生产环境：https://vuejs.org/js/vue.min.js3、NPM安装后续通过webpack和CLI的使用，后续都会使用这个方法。除了用var进行对象或者变量外，还可用let(es6里面定义变量)const(es6里面常量)创建Vue实列传入options里面可以有
2020-10-08 18:44:47
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人