敲代码的凪辉机-CSDN博客

原创 2020-10-12 表单输入绑定

1、表单输入绑定基础用法文本<div id="app"> <form> <input v-model="msg" /> </form></div>var vm = new Vue({ el:"#app", data: { msg:'hello world!' }, });效果：多行文本<div id="app"> <form> <text

2020-10-13 16:24:14 224

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。实现一个鼠标点击按钮弹出“1”的事件<div id="app"> {{msg}} //绑定data中的msg <input type="button" v-on:click="tanchu" value="按钮" /> //这里v-on监听tanchu函数，注意：v-on只能</div>var vm = new Vue({ el:"#app", da

2020-10-09 17:44:04 221

原创 2020-10-05 vue学习笔记——列表渲染

1、v-for数组渲染列表用v-for将一个数组渲染为列表<div id="app"> <div v-for="item in items"> {{item.text}}{{wenben}} </div> //这里的v-for块中，能够对父作用域进行访问</div>var vm = new Vue({ el: '#app', data:{ wenben:'hello',

2020-10-06 20:54:01 242 4

原创 2020-09-29 vue学习笔记——条件渲染

条件渲染——v-if指令1、v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<div id="app"> <h1 v-if="ok">Yes</h1></div>这里的ok为true，yes才能被渲染var vm = new Vue({ el:"#app", data:{ ok:true }, })运行结果：若把ok:true改为ok:

2020-09-29 16:01:17 171

原创 2020-09-29 vue学习笔记——Class 与 Style 绑定（绑定内联样式）

Class 与 Style 绑定——绑定内联样式1、对象语法v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：<div id="app"> <div b-bind:style="styleObj">1</div> //这里直接绑定到对象，看起来更加的简介 &lt

2020-09-29 15:08:01 239

原创 2020-09-29 vue学习笔记——class与style绑定（对象语法、数组语法、用在组件上）

class与style绑定（用在组件上）class除了绑定在html上，还可以绑定在组件上。当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。<div id="app"> <alertmsg :class="classObj"></alertmsg> //这里的class是加给了template中的根元素。</div>Vue.co

2020-09-29 09:47:48 240

原创 2020/09/23 vue学习笔记——绑定html_class（数组语法）

绑定html_class（数组语法）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：<style> .active{ width:100px; height:100px; border:1px solid #ccc; } .text-danger{ color:red; } .bg{ background-color:azure;

2020-09-24 10:49:01 162

原创 2020-09-22 vue学习笔记——Class与Style绑定（对象语法）

Class于Style绑定对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div>上面的语法表示class是否存在取决于isActive是否为true，即数据属性是否为true。你可以在对象中传入更多字段来动态切换多个 class。v-bind:class 指令也可以与普通的class共存.active{ width:100px;

2020-09-23 10:05:31 159

原创 2020/09/22 vue学习笔记——计算属性与方法

计算属性与方法计算属性通过computed来调用getter与setter函数来实现效果，其实也可以通过在表达式中调用方法来达到计算属性实现的效果：<div id="app"> {{ReverseMsg}} {{ReverseMsg}} {{ReverseMsg}} </br> {{ReverseMsg1()}} {{ReverseMsg1()}} {{ReverseMsg1()}}</div>var vm = new Vue({

2020-09-22 15:31:23 78

原创 2020/09/18 vue学习笔记——计算属性

计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算

2020-09-21 09:40:46 78

原创 2020/09/06 python学习笔记——python中的变量和字符串

在python中的变量是一种指向性的，并不是将值存储在变量中，更像是把名字贴在某个变量上案例：a = 123b = 456t = a #t→a（123），123a = b #a→b（456）,456b = t #b→t（123），123print(a)#输出456注意：1.在使用变量时，需要对其进行赋值2.变量可以包括字母、数字、下划线，但变量名不能以数字开头3.字母可以是大写或小写，但大写和小写对于python来说是不同的两个名字。如python和Python是两个不同.

2020-09-16 20:15:08 181 2

原创 vue学习目录

2020/9/9 认识Vue：mvvm(model view view-model)认识及vue指令2020/9/9 认识Vue：条件与循环指令2020/9/9 认识Vue：处理用户输入2020-09-10 认识Vue：组件化应用构建2020/9/14 vue学习笔记——模板语法：模板语法插值2020/9/15 vue学习笔记——模板语法：指令...

2020-09-15 16:09:51 111

原创 2020/9/15 vue学习笔记——模板语法：指令

模板语法：指令指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。<div class="app"> <p v-if="seen">现在你看到我了</p></div>var data={ msg:"hello Wor

2020-09-15 09:31:33 147

原创 2020/9/14 vue学习笔记——模板语法：模板语法插值

vue学习笔记——模板语法：模板语法插值模板语法：（摘自vue.js官网）Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量

2020-09-14 09:39:48 119

qq_46580089的博客

原创 2020-10-12 表单输入绑定

原创 2020-10-07 vue学习笔记——事件处理