vue.jsc初体验

Vue

1.安装脚手架

(1)npm install -g vue-cli

(2)Vue -v //查看是否安装成功

(3)Vue init webpack name(名称)

(4)Npm install

(5)

(6)Npm install

(7)Npm run dev

2.用vue构建项目笔记3(引入jquery和bootstrap)

其实用了vue以后，并不建议再去用jquery.   vue是视图与数据双向绑定，可以通过操作数据来控制dom，好处多多，但是有的时候还是不得不引入jq的，比如我们要用bootstrap。

作为前端，切图也是很必要的技能，写适配的css代码量是一个很恐怖的事情，而且要考虑的东西比较多，难免有遗漏，造成BUG。而引入bootstrap后，

优秀的的栅格系统以及适配能力，会省很多事情。所以引入bootstrap不可避免，而bootstrap完全依赖于jq。。。。

1、npm install jQuery --save-dev         //用npm下载jq依赖

2、找到build文件夹下的webpack.base.conf.js    加入

var webpack=require('webpack');

在module.exports加入

[html] view plain copy

1. resolve: {
2. extensions: ['.js', '.vue', '.json'],
3. alias: {
4. '@': resolve('src'),
5. 'assets': path.resolve(__dirname, '../src/assets'),
6. 'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery')
7. }
8. }

3、在main.js中加入import jquery from 'jquery'

至此，引入jq完成

引入bootstrap只需要在main.js中写入

[javascript] view plain copy

1. import './assets/bootstrap/css/bootstrap.min.css'
2. import './assets/bootstrap/js/bootstrap.min.js'

并在assets的对应路径放入bootstrap文件即可。

下面就可以在组件中使用bootstrap了

3.导入外部的JS样式和文件

<template>

<div id="app" >

</div>

</template>

<script src="/static/js/easydialog.min.js" ></script>

<script> export default { name: 'MainPage', data () { return { } } </script>

<style>

@import '/static/css/easydialog.min.css';

</style>

4.导入外部的JS样式和文件

5.部分页面引用公共部分

注意:vue.js默认rem   1rem=16px

Vue props 双向数据绑定方法

众所周知vue2中，把prop数据绑定的.sync去掉了，官方给出的原因是它会破坏「单向数据流」的假设，后来可能因为.sync在实际工作确实有用也很方便，vue2.3+ 又加上去了，不过实现机制稍有变化，详情请移步vue

在这里说下在去掉.sync的版本中如何给props数据绑定
在这里先说下我遇到的情景，父组件中有个按钮 parent.vue，子组件中是个弹窗 child.vue。
父组件中弹窗值默认为false,当点击父组件中的按钮时 按钮值为true且传给子组件的弹窗值为true，此时弹出子组件中的弹窗，当关闭弹窗时 弹窗值为false,且false传回给父组件。这也是常说的父子组件之间的通信，方法有很多，我这里说一种，使用Vue版本为2.1.8。
请看代码：

parent.vue

<<template>

<div>

<button @click="showDialog"></button>

<show-dialog

:isDialogVisible= "isDialogVisible"     //动态绑定父组件的数据到子模板的props,当父组件的数据发生变化，改变化也会传给子组件

@getDialogVisible="setDialogVisible"  //监听子组件中$emit的变化

>

</show-dialog>

</div>

</template>

<script>

export default{

data() {

return {

isDialogVisible: false   //初始化值

}

},

methods:{

showDialog(){

this.isDialogVisible = true;  //点击button时，设值为true，触发动态绑定的:isDialogVisible

},

setDialogVisible(val){

this.isDialogVisible = val;

}

}

}

</script>

child.vue

<template>

<div>

<!--此处使用饿了么UI组件 版本1.2.9-->

<el-dialog

v-model="isDialogVisible"

>

</el-dialog>

</div></template><script>

export default{

data() {

return {

isDialogVisible: this.isDialogVisible  //把props的值赋给isDialogVisible

}

},

props:[

'isDialogVisible'    //接收父组件传的值，来控制弹窗显示和隐藏

],

watch:{

//监听isDialogVisible变更后对外发送事件通知，比如关闭弹窗时值变为false,通过$emit通知父组件的getDialogVisible，根据setDialogVisible方法去设置父组件的值

isDialogVisible(val){

this.$emit('getDialogVisible', val)

}

}

}</script>```

大致就是这样可以实现父子和子父组件之间的传值

calendar vue日期选择组件

组件使用

安装

npm i vue2-datepick --save

初始化

import Calendar from 'vue2-datepick';Vue.use(Calendar);

使用

<template>

<div id="app" >

<p @click = "setDate" >点击设置日期（默认今天）</p>

<p>选中的时间{{data}}</p>

<p @click = "setDate2" >设定指定的日期（2015-2-20）</p>

<p>选中的时间{{data2}}</p>

</div>

</template>

<script>

export default {

name: 'app',

data () {

return {

data:'',

data2:''

}

},

methods:{

setDate(){

this.$calendar.show({

onOk: (date) =>{

this.data = date

}

});

},

setDate2(){

this.$calendar.show({

year:[1925,2015],  //年份的范围,如果初始化的年份不在这个范围，会自动选最小的年份

date:'2015-2-20',  //初始化的日期

onOk: (date) =>{

this.data2 = date

},

onCancel:()=>{

console.log('关闭')

}

});

},

},

}

</script>