写在前面：
1.安装使用参照官方文档
2.这里只记录vue重点
笔记开始：
一个vue组件的data必须是一个函数，这样每个实例维护的是一份被返回对象的独立拷贝，如果没有这条规则，数据的修改会影响所有的其他实例。
如果模板属性是变量的话，vue 2.0中使用v-bind的方式来绑定变量，可以省略v-bind，例如<div :title="title"></div>
列表渲染：比如数组中直接采用赋值的方式不会造成列表的渲染，this.list[1] = {name:'hello',age:23}，这种写法不会触发重新渲染，可以使用vue全局的set方法来做，Vue.set(this.list,1,{name:'hello',age:23})
条件渲染：v-if,v-show，v-if表示标签在文档流中直接被删除，v-show表示标签还存在文档流中，通过display:none/block来切换。
vue插槽
如果组件内容过多，通过props属性显得太过臃肿，可以使用vue插槽slot，将slot元素作为承载分发内容的出口，比如很多个dialog，各个dialog内容不一样.
vue中触发自定义事件是子组件通过this.$emit('事件名','传递的参数')，例如this.$emit('my-event',this.hello)定义事件，父组件通过@my-event="responseEvent"监听事件。
//子组件 child
<template>
<button @click="emitMyEvent">click me</button>
</template>
<script>
export default {
data () {
return {
hello:'i am child'
}
},
methods: {
emitMyEvent(){
this.$emit('my-event',this.hello)
}
}
}
</script>
//父组件
<template>
<child @my-event="onChildMyEvent"></child>
</template>
<script>
export default {
data(){
},
methods:{
onChildMyEvent(params){
console.log(params) //i am child
}
}
}
</script>
计算属性和数据监听
computed计算属性可以根据其他属性来动态的更新计算属性，也可以使用method方法的方式来直接执行函数，二者的区别是：data里面的属性不更新的时候计算属性是不会更新的，但是method方法的方式不论data里面的属性是否更新都会执行函数。
如果计算属性里面没有引用data里面的属性，那计算属性从第一次加载完组件之后是永远定死的不会变动的，但method方法的方式每次都会执行，比如获取时间戳new Date()。
属性监听watch：就是监听vuejs的变量，每当这个变量被改动的时候，都去执行特定的操作
export default {
watch:{
myVal(newVal,oldVal){
this.getList();
}
},
methods:{
getList(){
}
}
}
父子组件通信
父组件向子组件传递消息是通过属性prop，子组件向父组件传递消息是通过发布emit事件。
vue高级功能－过渡/动画
给需要过渡的元素外层加一个transition标签,这是vue内置的一个组件，两种实现过渡的方式：
css:enter时：v-enter v-enter-active leave时：v-leave v-leave-active
<transition name="fade">
<p v-show="show">show</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active{
transition:all .5s;
}
.fade-enter, .fade-leave{
opacity:0;
}
</style>
js:通过v-bind:is,v-if ,v-else ,v-show来动态加载组件
vue命令查看
//vue命令列表
E:\workCode\vuedemo3>vue --help
Usage: vue <command> [options]
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
//vue可以使用的模板列表
E:\workCode\vuedemo3>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
vue项目搭建
vue项目初始化通过vue-cli初始化
//安装vue-cli
npm install vue-cli -g
//初始化项目，模板选webpack
vue init webpack my-vue
//安装项目依赖
npm install
//在localhost启动测试服务器
npm run dev
//生成线上目录（部署）
npm run build
总结：通过一个轮播小组件来感受一下vue
//app.vue
<template>
<div>
<slides :pictures="pictures" :speed="2000"></slides>
</div>
</template>
<script>
import Slides from 'components/slides';
export default {
components: {
Slides
},
data () {
return {
pictures: [
{
title: '1',
url: 'http://www.baidu.com',
src: require('../assets/slide/pic1.jpg')
},
{
title: '2',
url: 'http://www.jd.com',
src: require('../assets/slide/pic2.jpg')
},
{
title: '3',
url: 'http://www.tmall.com',
src: require('../assets/slide/pic3.jpg')
},
{
title: '4',
url: 'http://www.suning.com',
src: require('../assets/slide/pic4.jpg')
}
]
}
}
}
</script>
// components/slides.vue
<template>
<div class="slides-container" @mouseover="mouseOverPic" @mouseout="mouseOutPic">
<div class="slides-picture">
<a :href="pictures[currentIndex].url">
<img :src="pictures[currentIndex].src"/>
</a>
</div>
<div class="switch-button">
<a href="javascript:;" class="prev" @click="switchPic(prevIndex)">上一页</a>
<a href="javascript:;" class="next" @click="switchPic(nextIndex)">下一页</a>
</div>
<div class="slides-icon">
<ul>
<li v-for="(item,index) in pictures" :key="index" class="icon-index" :class="currentIndex === index ? 'active' : ''" @click="switchPic(index)"></li>
</ul>
</div>
</div>
</template>
<script>
export default {
props:{
pictures: {
type: Array,
default: []
},
speed: {
type: Number,
default: 2000
}
},
data() {
return {
currentIndex:0,
timer:null
}
},
mounted() {
//组件加载完成自动播放
this.autoPlay();
},
computed: {
prevIndex() {
if(this.currentIndex === -1){
return this.pictures.length - 1;
}
else{
return this.currentIndex - 1;
}
},
nextIndex() {
if(this.currentIndex === this.pictures.length){
return this.currentIndex = 0;
}
else{
return this.currentIndex + 1;
}
}
},
methods: {
switchPic(index) {
this.currentIndex = index;
},
autoPlay() {
this.timer = setInterval(() => {
this.switchPic(nextIndex);
},this.speed);
},
mouseOverPic() {
clearInterval(this.timer);
},
mouseOutPic() {
this.autoPlay();
}
}
}
</script>
<style scoped>
.slides-container{
width:900px;
height: 510px;
margin: 15px auto;
background:#ccc;
position: relative;
}
.slides-picture a{
float: left;
position: absolute;
top:0;
left:0;
}
.switch-button{
position: absolute;
top: 50%;
color: #fff;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
.switch-button a{
position: relative;
display: inline-block;
padding:5px 10px;
background:green;
}
.prev{
float:left;
}
.next{
float:right;
}
.slides-icon{
position: absolute;
bottom:20px;
left:50%;
}
.icon-index{
background: #000;
width: 25px;
height: 5px;
display: inline-block;
overflow: hidden;
margin-left: 5px;
cursor: pointer;
}
.active{
opacity: .3;
background:#f00;
}
</style>
网友评论