vue 学习一

Posted 2021-01-31 ampl

vue 知识点
1、 v-on:click="函数名" 绑定事件 等同于@click
实例化vue 并声明函数
var app=new Vue({
el:"#app",
data:{
list:[],
inputValue:‘‘
},
methods:{
handleBtnClick:function(){
alert(‘click‘)
}
}
})
2. v-model="inputValue" 绑定数据
一般放到input 标签，intput输入框里面的值发生变化的时候，inputValue就会跟着变化
3、 MVVM
4、 传值
v-bind:变量="" , v-bind 等同于：
子组件通过v-bind进行数据绑定
子组件向父组件传值，this.$emit(函数,参数)父组件监听用的是@+函数名
js数组移除元素splice(索引，个数)
<child @click="handleClick"> </child>

Vue.component(‘child‘,{
template:"<div @click=‘handleChildClick‘">Child</div>"
,methods:{
handleChildClick:function(){
alert(‘child click‘)
this.$emit(‘click‘)//向父组发送事件
}
}
})

var vm=new Vue({
el:‘#root‘,
methods:{
handleClick:function(){
alert(‘click‘)
}
}
})
点击界面出来的child 将会触发childclick（子组件事件t)和click(父组件事件)两次弹窗

5、 v-text="" 让标签的内容
v-html="" html可以解析
v-bind:title=""
6、computed 计算属性
7.watch 监听器
getter和setter
8. v-if
v-else-if
v-else
9. component 组件在声明data的时候 不能直接给值而是通过return 返回

data:function(){
return { content:"this is row"}
}
10. $refs 指向所有的引用 给dom加引用来操作dom节点
11、父组件向子组件传值
<child content="hello"></child>
Vue.component(‘child‘,{
props:[‘content‘] //通过该属性接收
template:‘<div>{{content}}</div>‘

}
)

12、 给组件绑定原生事件 只要在事件后面加native就可以直接触发不用子组件向父组件传递那么麻烦如4总结
<child @click.native="handlClick"></child>

13. 页面跳转
<router-link to="/list"></router-link>
14、项目里面 别名
webpack.base.conf.js文件
下面 ‘style‘: resolve(‘src/assets/style‘)
在其它引用的时候style可以替换其路径
而在style引用公共样式的时候需要用~+别名
@import ‘~style/varibles.styl‘
npm install [email protected] --save

15 git
git pull 拉取最新代码可以看见最新的分支
git checkout index-icons 拉取分支
//全并分支
git branch
git cheout master
git merge origin/index-swiper