nanzai11111-CSDN博客

原创箭头函数的基本使用

<!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 226

原创编译的作用域

<!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 168

原创 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 419

原创 vue中v-model修饰符的使用

<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"> <!--在没有加.lazy修饰符的时候，是实时绑定更新的，加入之后写完数据后，失去焦点或者回

2020-10-15 14:42:57 310

原创 vue中v-model结合chexbox类型

<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"> <!--这是chekbox单选框的中v-model的使用方法 <la

2020-10-15 14:41:25 263

原创 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 1082

原创 vue中v-model的本质

<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id

2020-10-15 14:39:31 218

原创 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 169

原创 v-for使用时添加key

<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head><body><div id="app"> <ul><!--

2020-10-15 14:37:07 237

原创 vue中组件间的通信

父子组件之间的通信方式有两个，分别是：1、父组件通过props像子组件传递数据2、子组件通过事件像父组件传递消息

2020-10-15 14:32:26 194

原创 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 336

原创 vue中计算属性computed和methods函数的对比

<div id="app">  <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2>  <h2>{{getFullName()}}</h2> <h2>{{getFu

2020-10-08 19:02:30 241

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 384

原创 vue中计算属性computed

简单的案例：将firstName和lastName结合起来并且中间还要加上空格<div id="app"> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2>

2020-10-08 18:58:58 565

原创 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 400

原创 vue中事件监听v-on的基本使用

v-on参数当通过methods中定义方法，以供@click调用，需要注意参数问题，情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（） <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button><!-- 2、在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样

2020-10-08 18:54:26 692

原创 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 99

nanzai11111的博客