Vue
文章平均质量分 75
我要糖
这个作者很懒,什么都没留下…
展开
-
9-Vue-组件基础
9-Vue-组件基础基本示例自定义一个组件// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})组件是可复转载 2021-03-07 15:18:39 · 123 阅读 · 0 评论 -
八-Vue-表单输入绑定
八、表单输入绑定基础用法可以用 v-model 指令在表单 input 、textarea、select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:text 和 textarea 元素使用 value property 和 input 事件;checkbox 和 radio 使用 checked property 和 change 事件;select 字段将 value 作为 pr原创 2021-03-06 21:52:42 · 115 阅读 · 0 评论 -
七-Vue-事件处理
七、事件处理监听事件v-on 指令监听 DOM 事件,并在触发时运行一些 Javascript 代码<div id="example-1"> <button v-on:click="counter += 1"> <p> Button clicked {{ counter }} times. </p> </button></div>var example1原创 2021-03-06 20:49:17 · 161 阅读 · 0 评论 -
6-Vue-条件渲染
六、列表渲染v-for看个简单例子<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li></ul>var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { mes原创 2021-03-06 19:42:24 · 109 阅读 · 0 评论 -
5-Vue-条件渲染
五、条件渲染v-if条件性渲染一块内容,只有返回 true 的时候才会被渲染。<h1 v-if="awesome"> Vue is awesome!</h1>当然也能增加 else 块:<h1 v-if="awesome"> Vue is awesome!</h1><h1 v-else> Oh no</h1>如果在 template 元素上使用 v-if 条件渲染分组:<templ原创 2021-03-06 16:20:48 · 106 阅读 · 0 评论 -
4-Vue-Class 与 Style 绑定
4、Vue-Class 与 Style 绑定绑定 HTML Class将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。对象语法我们可以传给 v-bind:class 一个对象,以动态的切换 class<div v-bind:class="{ active: isActive }"> </div>这里 class 是否存在取决于 isActive 是否 true当然我们也原创 2021-03-06 14:17:16 · 120 阅读 · 0 评论 -
3-Vue-计算属性和侦听器
计算属性和侦听器计算属性对于任何复杂逻辑,都应该使用计算属性。基础例子<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>写的 JS 代码应该为var vm = new Vue({ el: '#example',转载 2021-03-05 20:00:40 · 124 阅读 · 0 评论 -
2-Vue-模板语法
二、模板语法插值文本最常见的就是双括号进行文本插值,其实就是 Mustache 语法。<span>Message: {{msg}}</span>而我们这个标签很会被替代为对应数据对象上 msg property 的值,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新。当然这里我们可以使用 v-once 指令,也能执行一次性插值,当数据改变时,插值处的内容不会更新<span v-once>这个将不会改变:{{ msg }}<原创 2021-03-05 16:48:06 · 103 阅读 · 0 评论 -
1-Vue-基础知识
一、Vue.jsVue.js 的了解和安装一种构建用户界面的渐进式框架。安装的话,复制这个链接https://vuejs.org/js/vue.min.js然后把网页内的内容复制到我们自己新建的 vue.js 中,我们需要编写的 html 和 vue.js 放在同一个文件夹中就可以了。注意我们版本的使用,在开发环境下,不要使用压缩/生产版本,要使用开发板本。法一:直接用 script 来引入这个时候我们就可以直接通过 script 来引入。<script src="./Vue.js"&原创 2021-03-03 22:07:50 · 117 阅读 · 1 评论