双向数据绑定
指令
v-model
双向绑定
v-text
v-html
v-bind
可以绑定html标签的任何一个属性
示例：
<a href="#" v-html="msg" v-bind:title="tip" v-bind:pid="id"></a>
v-if
<span v-if="isOK" v-text="msg"></span>
绑定一个boolean值，如果为true输出，如果为false则不输出
v-show
<span v-show="isOK" v-text="msg"></span>
绑定一个boolean值，如果为true显示，如果为false则不显示display:none
v-for
遍历
//第一种写法<ul>
<li v-for="item in names">
{{item}} <span v-text="item"></span>
</li></ul>//第二种写法 设置唯一标示<ul>
<li v-for="(item,index) in names" :key="index">
{{index}} {{item}} <span v-text="item"></span>
</li></ul>//第三种写法 遍历对象 :key="item.id"<ul>
<li v-for="(item,key,index) in user" :key="index">
{{index}} {{key}} {{item}} </li></ul>v-on
//注册事件<button v-on:click="btnClick"> 显示或隐藏 </button>//简写<button @click="btnClick"> 显示或隐藏 </button>
//script中添加执行的方法
export default {
data() { return { msg: '<b>Hello Vue</b>', tip: '这是一个提示', isOK: false
}
}, methods: {
btnClick() { this.isOK = !this.isOK;
}
}
}指令的两个缩写
v-on:click --> @click v-bind:id --> :id
组件
子组件的基本使用
//注意：component中的data要返回functionVue.component('my-item', {
data() { return { count: 0
}
}, template: '<li @click="count += 1">{{count}}</li>'})var app = new Vue({ el: '#app', data: { msg: 'world'
}
})控制组件的范围（父组件给子组件传值）
<my-item v-bind:test="msg"></my-item>var app = new Vue({
el: '#app',
data: {
msg: 'hello'
},
components: { 'my-item': {
props: ['test'],
template: '<p>{{test}}</p>'
}
}
});子组件通知父组件
<my-item :count="count" @increate="increateDemo"></my-item>
Vue.component('my-item', {
data() { return {}
},
props: ['count'],
template: '<div @click="divClick" >count: {{count}}</div>',
methods: {
divClick() {
this.$emit('increate', '子组件传来的值');
}
}
})var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increateDemo(c) {
console.log(c);
}
}
});加载.vue的子组件（需要配置好webpack）
import App from './07-vue.vue' //加载.vue组件 new Vue({ el: '#app', //将组件中的内容插入到页面中指定的元素 render: c => c(App) //编译app.vue组件 })
过滤器
私有过滤器
<div id="app">
<span>
{{msg | toLower | replace('l','x')}} </span>
</div>
<script>
var app = new Vue({ el: '#app', data: { msg: 'Hello Vue'
}, filters: { toLower: function(input) { return input.toLowerCase();
}, replace: function(input, old, newValue) { var r = new RegExp(old, 'g'); return input.replace(r, newValue);
}
}
}) </script>全局过滤器
<div id="app">
<span>
{{msg | toLower | replace('l','n')}} </span>
</div>
<script>
Vue.filter('toLower', function(input) { return input.toLowerCase();
})
Vue.filter('replace', function(input, old, newValue) { var r = new RegExp(old, 'g'); return input.replace(r, newValue);
}) var app = new Vue({ el: '#app', data: { msg: 'Hello Vue'
}
})路由
vue-router组件
示例
<div id="app">
<router-link to="/index">首页</router-link>
<router-link to="/login">登录</router-link>
<br>
<router-view></router-view>
</div>
<script>
var index = Vue.component('index', {
template: '<div>这是首页</div>'
}) var login = Vue.component('login', {
template: '<div>这是登录</div>'
}) var router = new VueRouter({
routes: [
{name:'index', path: '/index', component: index},
{name:'login', path: '/login', component: login}
]
}) var vm = new Vue({
el: '#app',
router: router
})获取路由参数
<div id="app">
<router-link to="/index/laozhao">首页</router-link>
<router-link to="/login">登录</router-link>
<br>
<router-view></router-view>
</div>
<script>
var index = Vue.component('index', {
template: '<div>这是首页, {{username}}</div>',
data: function() { return {
username: ''
}
},
created: function() { this.username = this.$route.params.username;
}
}) var login = Vue.component('login', {
template: '<div>这是登录</div>'
}) var router = new VueRouter({
routes: [
{name:'index', path: '/index/:username', component: index},
{name:'login', path: '/login', component: login}
]
}) var vm = new Vue({
el: '#app',
router: router
})发送ajax请求-vue-resource
https://github.com/pagekit/vue-resource
发送get请求
<div id="app">
<button @click="getdata">按钮</button>
<ul>
<li v-for="item in menus">{{item.title}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
menus: []
},
methods: {
getdata() { this.$http.get('http://127.0.0.1:8899/api/getmenus').then(function( res) { this.menus = res.body.message;
})
}
}
});发送post请求
<div id="app">
<button @click="senddata">按钮</button>
</div>
<script>
var vm = new Vue({ el: '#app', data: { menus: []
}, methods: {
senddata() { this.$http.post('http://127.0.0.1:8899/api/postcomment/43', {content: 'wokao'},{emulateJSON:true}).then(function( res) { console.log(res.body)
})
}
}
}); </script>
作者：琪先生_zZ
链接：https://www.jianshu.com/p/f5ea69d409f1