Vue
关注
分享
扫一扫
WARGON
这个作者很懒，什么都没留下…
展开
-
vue模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 插值：1：文本最常见的数据绑定形式：使用 {{...}} 进行文本插值。例：<div id="abc"><p>{{ message }}</p></div><script>...</scri..原创 2018-09-26 10:25:07 · 473 阅读 · 0 评论 -
Vue.js一个简单的模块化应用
一个简单的模块化项目：使用vue-cli、webpack构建的项目。项目的具体构建以及项目中各种配置，涉及到太多内容，这里不讨论。只讲一下简单的应用。所做的工作都在src文件夹下。在根目录下，有一个index.html，是访问项目时默认的页面，在页面加载后，可以看到其引入了app.js文件。应该是工程中通过某种方式生成的一个js文件。我们需要关心的只是main.js文件。将ma...原创 2018-09-28 14:43:11 · 8125 阅读 · 0 评论 -
Vue.js自定义指令
Vue允许注册自定义的指令。1：全局指令。同全局组件一样，可以用在任何挂载点下使用全局指令。例：<div id="app"><p>页面加载时，input元素自动获得焦点</p>//自定义指令绑定在input元素上<input v-focus/></div><script>//注册一个自定义的原创 2018-09-28 14:34:32 · 323 阅读 · 0 评论 -
组件的深入了解
1：组件注册：# 组件名问题：可以使用kebab-case、PascalCase两种命名方式。建议使用kabab-case。# 全局注册：通过Vue.component('xxx',{...})的方式注册的组件，可以用在任何Vue根实例的模板中。并且，多个组件在各自内部也可以相互使用（这一点待深入理解）。注意，全局注册必须在根实例创建之前进行。# 局部注册：全局注册的组件有时不够理...原创 2018-09-28 14:33:30 · 360 阅读 · 0 评论 -
Vue.js组件
组件可以扩展HTML元素，封装可重用代码。几乎任意类型的应用的界面都可以抽象为一个组件树。1：全局组件。指的是在全局定义的组件，注册的语法格式为：Vue.component(tagName,options) 调用时，直接在挂载点下使用<tagName></tagName>即可。所谓全局，就是将可以在各个挂载点下可用。例：<div id="app">...原创 2018-09-28 14:31:28 · 237 阅读 · 0 评论 -
Vue路由
一个实例：<!DOCTYPE html><html> <head> <title>Vue.js路由router</title> <script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script> <原创 2018-09-27 19:36:00 · 196 阅读 · 0 评论 -
简单理解vue中el、template、replace元素
转自：https://www.jb51.net/article/95878.htmel类型： String | HTMLElement | Function限制： 在组件定义中只能是函数。详细：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。注意元素只用作挂载点。如果提供了模板则元素被替换，除非 replace 为 false...转载 2018-09-27 13:49:16 · 1362 阅读 · 0 评论 -
字符串模板、模板字符串、Vue中使用template等等。
1：模板字符串传统的JS语言，输出模板是这样写的：$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on ...原创 2018-09-27 12:13:48 · 8943 阅读 · 1 评论 -
Vue.js表单
使用v-model对表单控件进行双向绑定1：input控件和textarea控件。<div id="app"><input type="text" v-model="message"/><p>消息是：{{message}}</p><textarea v-model="message2"原创 2018-09-26 18:34:22 · 247 阅读 · 0 评论 -
Vue.js事件处理器
事件监听：v-on指令进行事件监听。v-on需要参数，参数为事件类型。如click、change等。1：直接操纵属性<div id="app><button v-on:click="counter++">增加1</div><p>这个按钮被点击了{{counter}}</p></div>原创 2018-09-26 17:12:13 · 325 阅读 · 0 评论 -
Vue.js样式绑定
样式绑定class和style时html元素的属性，可以使用v-bind来进行样式的yi绑定，以设置样式。v-bind在绑定class和style时，Vue专门增强了它。结果类型不仅可以时字符串，还可以是对象和数组。class属性绑定1：基本使用：<style>.static{...}.class1{...}//最好不使用中划线//.class2-a...原创 2018-09-26 16:28:39 · 273 阅读 · 0 评论 -
Vue.js监听属性
监听属性： watch属性为Vue的监听属性，用来监听Vue实例中数据的变动。可以是data中定义的属性（也经常这么用），也可以时Vue自带的属性，比如$route。 首先看示例： <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p>...原创 2018-09-26 16:27:51 · 2416 阅读 · 0 评论 -
Vue.js计算属性
计算属性：Vue中的computed属性用来指定计算属性。计算属性本质上将是一个函数，主要用来处理一些复杂逻辑。例：<div id="app"><p>原始字符串：{{message}}</p><p>反转后：{{reversedMessage}}</p></div><script&原创 2018-09-26 12:20:07 · 284 阅读 · 0 评论 -
Vue条件和循环
条件：v-if、v-else-if、v-else，这三个指令不需要参数。例：<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if=&qu原创 2018-09-26 11:23:17 · 439 阅读 · 0 评论 -
通过vue-cli和webpack构建的Vue项目
webpack的配置文件位于：build/webpack.base.conf.js要想高明白，需要搞清楚webpack。原创 2018-09-28 15:09:57 · 259 阅读 · 0 评论