vue
关注
分享
扫一扫
FreeBSFree
花有百样红，人与人不相同
展开
-
路由
路由示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"><...原创 2019-06-04 14:53:30 · 145 阅读 · 0 评论 -
动态更改数据属性
动态添加数据属性<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vu...原创 2019-06-19 11:24:35 · 201 阅读 · 0 评论 -
混入
普通混入<body><div id="app"></div><script> var myMixin = { created:function () { this.start() }, methods:{ start:functio...原创 2019-06-06 16:58:01 · 159 阅读 · 0 评论 -
自定义指令
全局指令<body><div id="app"> <input type="text" v-focus></div><script> Vue.directive('focus',{ inserted: function (el) { el.focus(); ...原创 2019-05-29 10:49:19 · 131 阅读 · 0 评论 -
过渡与动画
过渡示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"><...原创 2019-06-05 17:46:27 · 167 阅读 · 0 评论 -
组件
全局组件<body> <div id="app"> <child ></child> </div> <script> // 全局组件 Vue.component('child',{ template:'<h1>ch...原创 2019-05-28 11:38:25 · 151 阅读 · 0 评论 -
表单双向绑定
普通文本输入框双向绑定<body><div id="app"> <input type="text" v-model="message1" placeholder="编辑..."> {{message1}} <br/> <textarea v-model="message2"></te...原创 2019-05-23 17:19:14 · 311 阅读 · 0 评论 -
计算属性
计算属性中可以重写setter，getter方法。但是有缓存。原则是vm不变界面不进行重新渲染，那么属性方法将不走，也就是用上次缓存。<body> <div id="app"><!-- 计算属性get，setter方法(有缓存)--> <p>{{ message }}</p> <p>{{ message }}...原创 2019-05-18 14:38:17 · 119 阅读 · 0 评论 -
事件监听处理
监听事件处理vm数据<body><div id="app"> <button @click="count++">点击</button> {{count}}</div><script> new Vue({ el: '#app', data: { ...原创 2019-05-23 11:53:04 · 364 阅读 · 0 评论 -
循环遍历
test <body><div id="app"> <!--li循环--> <ol> <li v-for = "item in arr"> {{item.name}} </li> </ol> <!--template循环--> <ul&...原创 2019-05-18 11:21:16 · 216 阅读 · 0 评论 -
样式绑定
class属性绑定（普通）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.o...原创 2019-05-23 10:13:29 · 134 阅读 · 0 评论 -
条件语句
<body> <div id="app"> <div v-if="show == 0"> <h1>div1</h1> </div> <div v-else-if="show == 1"> <h1>div2</h1> </div>...原创 2019-05-17 10:04:13 · 97 阅读 · 0 评论 -
vue指令
1. v-html输出html指令<!--v-html指令--><div id="app"> <div v-html="message"></div></div><script> var vm = new Vue({ el: "#app", data: { message:'<h1>test...原创 2019-05-16 15:30:27 · 104 阅读 · 0 评论 -
监听属性
监听属性实现计数器<body> <div id="app"> <p>计时器:{{count}}</p> <button @click="count++" >点我</button> </div> <script> var vm = new Vue(...原创 2019-05-21 17:13:10 · 1036 阅读 · 0 评论 -
单向绑定
<!DOCTYPE html><html> <head> <meta charset="{utf-8}"> <title>test</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>...原创 2019-05-16 13:46:46 · 134 阅读 · 0 评论 -
vue安装
安装淘宝镜像cnpm查看版本$ npm -v升级 npmcnpm install npm -g升级或安装 cnpmnpm install cnpm -g利用cnpm安装vue最新稳定版$ cnpm install vue利用cnpm安装vue的脚手架$ cnpm install --global vue-cli利用脚手架创建vue项目# 创建一个...原创 2019-05-13 17:56:26 · 112 阅读 · 0 评论 -
ajax
get<template> <div id = "app"> {{info}} </div></template><script>import Axios from 'axios'export default { name: 'app', data () { return { ...原创 2019-06-18 17:39:38 · 172 阅读 · 0 评论