vue.js
SunPowerZ
这个作者很懒,什么都没留下…
展开
-
vue学习之v-for和v-on
v-for 指令可以绑定数组的数据来渲染一个项目列表。 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法。   使用二者写了一个简单的例子 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q原创 2018-06-12 00:45:10 · 1156 阅读 · 0 评论 -
vue学习之路由
路由需要引入库“vue-router”   动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果: const User = { templat...原创 2019-02-22 22:44:16 · 210 阅读 · 0 评论 -
vue学习之安装使用
vue安装 npm install vue vue引入 在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别: UMD CommonJS ES Module 完整版 vue.js vue.common.js vue.esm.js 只包含运行时版 vue.runtim...原创 2018-06-10 23:14:07 · 208 阅读 · 0 评论 -
vue学习之自定义事件
通过自定义事件可以实现vue组件”子->父”的数据传递 由子组件$emit事件的名称,父组件监听这个名称的事件,事件名称的命名推荐使用 “kebab-case” 的形式。 下面代码中,子组件给父组件传递了一个弹框信息。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&...原创 2018-06-18 16:01:56 · 298 阅读 · 0 评论 -
vue学习之Prop
我们可以使用prop进行“父->子”的数据通信 代码中将当父组件”nameValue的值传递给子组件”name” 子组件通过props来接收数据: 方式1: props: ['name'] 方式2 : props: { name:String } 方式3: props:{ name:{ type:S...原创 2018-06-18 15:46:23 · 330 阅读 · 0 评论 -
vue学习之组件——全局组件和局部组件
vue有两种组件的注册类型:全局注册和局部注册。 注册组件时传入的配置和创建Vue实例差不多,但也有不同,其中一个就是data属性必须是一个函数。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &a原创 2018-06-16 23:52:42 · 180 阅读 · 0 评论 -
vue学习之监听属性
监听属性属性关键词: watch 通过 watch 来响应数据的变化 &nbsp; 例子 代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&a原创 2018-06-16 20:01:13 · 164 阅读 · 0 评论 -
vue学习之计算属性
计算属性关键词: computed 计算属性可以通过写一些方法用于处理元数据。例子中messageUpper函数将message的值变为大写。 计算属性默认只有 getter ,setter 需要自己提供。例子中输入栏提供修改message的值。 例子: 代码: <!DOCTYPE html> <html> <head> <...原创 2018-06-14 00:59:39 · 165 阅读 · 0 评论 -
vue学习之v-model和v-bind
v-model 能轻松实现表单输入和应用状态之间的双向绑定。 例子 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;vue&原创 2018-06-13 23:26:58 · 240 阅读 · 0 评论 -
vue学习之v-if和v-show
v-if <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue</title> <script src="vue.js"></script>原创 2018-06-10 23:46:40 · 128 阅读 · 0 评论