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>