vue基本指令
v-text 显示文本
v-html 显示网页
v-bind 数据绑定 让我们页面上显示的值动态化(单向数据流的体现) 单 向数据流:当模型发生更改之后，我们的视图跟着变化 ,v-bind:title=”“可以简写 :title=”“
v-on 事件处理 v-on:click=”” 可以简写成@click 有参数时可以写成@click(params)
v-modle 数据双向绑定 （一般用于表单元素） 原理 （属性劫持）
v-f 如果为假，不会创建dom元素
v-show 如果为假，会创建dom元素，通过样式隐藏了
- 需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
v-for 语法： v-for=”(person,index) in persons” :key=”“
- 有key属性时并且值不同，每个元素都是新创建的，没有key则会复制上一个元素
过滤器语法
私有过滤器 只有在当前Vue实例中使用
filters:{
toUC:function(input){
return input.toUpperCase()
}
}全局过滤器 在所有的Vue实例中都可以使用
- filters里面的函数必须要有返回值
Vue.filter('toUC',function(input){
return input.toUpperCase();
})Vue的五种创建组件方式
1. 先定义，再注册
<body>
<div id="app">
<login></login>
</div>
</body>
<script>
// 定义组件
var loginComponent = Vue.extend({
template : '<div>用户名:<input type="text"> </br>密码: <input type = "password"> </br> <button>注册</button></div>'
})
// 注册组件
Vue.component('login',loginComponent);
var vm = new Vue({
el : '#app'
})
</script>2. 定义并注册
<body>
<div id="app">
<login></login>
</div>
</body>
<script>
// 定义组件并注册
Vue.component('login',{
template : '<div>用户名:<input type="text" v-model="username"> \
</br>密码: <input type = "password"> </br> \
<button v-on:click="login">注册</button></div>',
methods : {
login : function(){
console.log(111);
}
},
data : function(){
return {
username : '张三'
}
}
});
var vm = new Vue({
el : '#app'
})
</script>
3.把定义我们组件内容代码抽离到 标签中去
<body>
<template id="templateId">
<div>用户名:<input type="text" v-model="username">
</br>密码: <input type = "password"> </br>
<button v-on:click="login">注册</button></div>
</template>
<div id="app">
<login></login>
</div>
</body>
<script>
// 定义组件并注册
Vue.component('login',{
template : '#templateId',
methods : {
login : function(){
console.log(111);
}
},
data : function(){
return {
username : '张三'
}
}
});
var vm = new Vue({
el : '#app'
})
</script>
4.把定义我们组件内容代码抽离到 中去
<body>
<script type="text/html" id="templateId">
<div>用户名:<input type="text" v-model="username">
</br>密码: <input type = "password"> </br>
<button v-on:click="login">注册</button></div>
</script>
<div id="app">
<login></login>
</div>
</body>
<script>
// 定义组件并注册
Vue.component('login',{
template : '#templateId',
methods : {
login : function(){
console.log(111);
}
},
data : function(){
return {
username : '张三'
}
}
});
var vm = new Vue({
el : '#app'
})
</script>5.单文件组件
vue-router vue路由的三种使用方式
申明式导航
<body id="app">
<router-link to="/home">主页</router-link>
<router-view> </router-view> //展示部分
</body>
<script>
const router = new VueRouter({
routes : [
{ path : '/home' , component : home },
]
})
new Vue({
el: '#app',
router :router,
render: h => h(App)
})
</script>
编程式导航1
// 编程式导航
this.$router.push({ name: 'pictureAndText', params: { infoId: this.$route.params.infoId }})
// 定义匹配路由
{path : '/goods/pictureAndText',name : "pictureAndText",component:pictureAndText},
编程式导航2
// 编程式导航
this.$router.push({ path: '/goods/goodscommont', query: { infoId: this.$route.params.infoId }})
// 定义匹配路由
{path : '/goods/goodscommont',component:goodscommont}
获取dom对象
<div ref="textAreaRef"></div>
this.$refs.textAreaRef.value = "";
父组件给子组件传递数据
// 父组件中
<subSwipe :lunbo_time="timer"></subSwipe>
// 子组件中不限制类型
props ["lunbo_time"]
// 子组件中限制类型
export default {
props: {
// 只检测类型
lunbo_url: String,
// 检测类型 + 其他验证
lunbo_time: {
type: Number,
// default: 0,
required: true,
validator: function (value) {
return value >= 1000
}
}
}
}
子组件给父组件传递数据
// 父组件html中
<subnumber v-on:numChange="receiveSubNumberCount"> </subnumber>
methods:{
receiveSubNumberCount(num){
console.log(num)
}
}
// 子组件中
this.$emit('numChange', 1);非父子组件传递数据
// 非父子间传递数据要共用同一个vue实例对象
// 传递方
bus.$emit('sendNumber',1);
// 接收方
bus.$on('sendNumber',(count)=>{
console.log(count);
});
生命周期钩子
- beforeCreate (组件创建钱)
created 创建 （组件创建完但还没有呈现）
beforeMount （挂载前）
mounted 挂载 （组件已经呈现了）
beforeUpdate (更新前)
updated 更新 （组件数据更新时，会调用该方法刷新视图）
beforeDestory (销毁前)
- destroyed 销毁 (离开页面时，会销毁掉组件,根主件是承载体，不会被销毁)
在根实例对象中的data里创建的Vue实例可以被每个子组件访问到
// 根组件
new Vue({
el : "#app",
data:{
bus : new Vue();
}
})
// 子组件里访问
this.$root.bus
Vuex
Vuex的用途 ：
- 主要用来操作项目中全局共享的数据，它可以在多个组件之间进行数据的传递(间接的)，
- 但是和中央事件总线的区别是，Vuex不是直接把数据传给另外一个组件，
- 而是把更改之后的数据，放入到公共的仓库中，另外一个组件需要使用的时候去仓库中取
Vue核心
- state:管理数据的地方，相当于自定义组件中局部数据 data(){return {}}
- getters: 从state中获取值
- Mutations : 同步更改state中的数据
- Actions: 异步更改state中的数据
2565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
