qq_43189389的博客

一、 新建一个html，在script标签引入Vue.js **第一种方法**： 在官方网站下载vue.js到本地然后引入，[vue.js](https://cn.vuejs.org/) **第二种方法**： 使用 CDN 方法 以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 Staticfile CDN（国内） : https:/...

父组件访问子组件时，使用2种方法。1、$children，获取该子组件下所有内容，子组件使用几次，就获取几次2、$refs获取的是对象类型，默认是一个空对象，只获取子组件上带属性 ref=’’ 的子组件的内容。示例： <!--父组件--> <div id="app"> <cpn></cpn> <!--子...

props用于父组件向子组件传递数据，子组件向父组件传值则是使用自定义事件来完成。 自定义事件的流程： 1.在子组件中，通过$emit()来触发事件。 2.在父组件中，通过v-on来监听子组件定义的事件。示例：<!--父组件--> <div id="app"> <!--监听子组件定义的事件，获取传过的参数，这里的事件忽略括号-->...

父子组件的通信，传值通过组件的props属性，Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。父传子:1:props使用数组，里面存变量 <div id="app"> //变量绑定到子组件的标签上，v-bind:pros数组里的变量名="传的参数的变量...

每个组件也像每个Vue实例拥有自己的data属性和methods方法<div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是组件</h2> <h3>目前计数：{{co...

上代码演示：<div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> <!--组件模板抽离的第一种写法--> <script type="text/x-template" id="cpn1"> <div> ...

父子组件的区别 <div id="app"> <cpn2></cpn2> </div> <script> //构造子组件 const cons1 = Vue.extend({ template: '<div><h2>我是子组件</h2></div>...

全局组件和局部组件<div id="app"> <!--第三：使用组件--> <cpn></cpn> </div> <div id="app2"> <!--第三：使用组件--> <cpn></cpn> </div> <s...

v-model的三个修饰符：1…lazy取代 input 监听 change 事件，让input框在失去焦点或者按enter时才会更新数据：2…number 输入字符串转为有效的数字：3…trim 过滤掉输入内容的首尾空格：<div id="app"> <!--v-model修饰符--> <!--1..lazy取代 input 监听 chang...

可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。示例：<!--双向数据绑定--> <div id="app"> <!--v-model指令表单双向数据绑定-->...

示例：<div id="app"> <ul> <li v-for="item in moveList">{{item}}</li> </ul> <button @click="changeList">点击修改</button> </div> <scri...

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。示例：<div id="app"> <!--循环数组不带索引--> <ul> <li v-for="item in moveList"&g...

官方说明：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show ...

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。1.v-if=“布尔”，如果为true，就显示当前内容， v-else否则就隐藏。<div id="app"> <h2 v-if="true">同学们好啊</h2> <h2 v-else>老师好</h2></div&g...

v-on修饰符。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。示例：1.stop 调用event.stopPropagation阻止冒泡<div id="app"> <div @click="parentClick"> aaaa <button @click.stop="...

1.letES6新增了 let 命令，用来声明变量，用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。接下来做个练习来解释 let 和 var的区别。 变量作用域 { var name = 'who'; let a = 10; } console.log(name); //打印who console.log(a...

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。<div id="app"> <h2>第一种方法拼接字符串---{{lastName + ' ' + firstName}}</h2> <h2>第二种拼接字符串---{{lastName}} {{firstNam...