2020-11-26

vue实列中可以放的部分属性:
var app = new Vue({
    el:" "
    data:{

    }
    computed:{

    }
    methods:{

    }
    components:{

    }                 ************(注册组件,也可以写在创建组件构造器的属性中,或者component定义全局组件)
    
})
一` 组件化开发
注册组件模板:
1.基本写法:
    const conC = Vue.extend({
        template:
        `
        <div>
            <h1></h1>
        </div>

        `,
        data() {

        }
        components:{

        }
    })
    Vue.component('cpn1',conC)
    <cpn1><cpn1>
2.语法糖写法
<template  id="">
    <div>
        <h1></h1>
    </div>
</template>

    const con = {
        template:"#id",
        data() {
            reture {

            }
        },
        components: {

        },
        props:{
            cmessage: 数据类型(String/Number)
            cmessage:{
                typeof:        ,
                default:       
            }
        }
    }
    component('cpn1',con)
    <cpn1></cpn1>
3.父传子组件之间的通讯 (父传子用props)
<div id="app">       

    <cpn :cmessage="message" @ooclick="fclick">

    </cpn>

</div>
<template id="cpn" >
    <div>
        <h1>
            {{name}}
        </h1>
    </div>
</template>
const app = new Vue({
    el:"app",
    date:{
        message:"信息"
    },
    mehtods:{
        cpfclick() {
            
        }
    },
    computed:{},
    components:{
        cpn:{
            template:"#cpn",
            data() {
                return {
                    name:'张三'
                }
            }
        },
        prpos:{
            cmessage:{
                typeof:String,
                default:'哈哈'
            }
        }
    }
})
4.子传父(子传父用自定义事件 this.$eimt())
<div id="app">       

    <cpn :cmessage="message">

    </cpn>
   
</div>
<template id="cpn" >
    <div>
        <h1>
            {{name}}
        </h1>
         <button @click="btnclick">按钮</button>
    </div>
</template>
const app = new Vue({
    el:"app",
    date:{
        message:"信息"
    },
    mehtods:{},
    computed:{},
    components:{
        cpn:{
            template:"#cpn",
            data() {
                return {
                    name:'张三'
                }
            }
        },
        prpos:{
            cmessage:{
                typeof:String,
                default:'哈哈'
            }
        },
        mehtods:{
            btnclick() {
                this.$emit("ooclick")
            }
        }
    }
})
5.插条的使用(具名) 给slot一个name属性和随便一个属性值(为了准确找到替换的位置),同时替换的时候需要声明替换谁(slot="name的属性值")
 <div id="app">
        <cpn>
            <span slot="left">标题</span>
            <button slot="center">按钮</button>
            <a href="" slot="right">好好好好</a>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"></slot>
        </div>
    </template>
    <script>
        var app = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn: {
                    template: "#cpn"
                }
            }
        });
    </script>
6.作用域插条的使用 (内容需要用子组件中的数据) 1.给模板中的插条动态定义一个属性(:abc='子组件中的数据') 2.调用组件的时候在组件内使用<template slot-scope="slot"></template>就可以在内部通过slot.abc来访问子组价里面的内容
    <div id="app">
        <cpn>

        </cpn>
        <cpn>
            <template slot-scope="slot">
                 <span v-for="item in slot.abc">{{item}} * </span> 
            </template>
        </cpn>
        <cpn>
            <template slot-scope="slot">
                <span>{{slot.abc.join(" - ")}}</span>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <div>
          <slot :abc='movices'>
            <ul>
                <li v-for="item in movices">{{item}}</li>
            </ul>
          </slot>
        </div>
    </template>
    <script>
        var app = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            movices: ['海王', '海贼王', '海尔兄弟', '海海海']
                        }
                    }
                }
            }
        });
    </script>
    7.导入和导出
   一. commen.js
       导出 module.exports {
            变量
        } 
        导入  var arr = require('./aaa.js')
             arr.flag
             (var { flag } = require("./aaa.js"))
后面开始学习动态修改/添加标签属性
 复习一\
 v-html 
 v-text
 v-once
 v-bloak 需要写一个样式 display:none

 v-bind:src
 v-bind:herf
 v-bind:css
 v-bind:style


 计算属性: computed:{ }  调用计算属性里面的方法不用加括号()(煎本质)


v-bind:class=""  动态操作class 可以传一个对象,数组,.. {类名1:波尔类型1,类名2,波尔类型2}  [{类名1:波尔类型1},{}]
v-bind:style="" 动态添加属性 可以传对象,数组 {属性名1:属性值1,属性名2:属性值2} [{属性名:属性值,....}]


v-on: 语法糖@
修饰符 .stop  .once  

v-if="" v-else="" v-else-if=""
v-show 和v-if 区别:

v-for 遍历数组和对象

遍历数组的三种高级函数 filter() 过滤数组 .map()映射数组中的元素 .reduce() 对数组中的元素进行总汇(函数式操作,箭头函数,极为方便)
列1:  //利用箭头函数完成以上步骤  可见非常方便简洁   console.log(arr.filter(n => n < 100).map(n => n * 2).reduce((preval, n) => preval + n, 0));
例2    //利用函数式操作完成上述需求
        var app = arr.filter(function(n) {
            return n < 100
        }).map(function(n) {
            return n * 2
        }).reduce(function(pre, n) {
            return pre + n
        }, 0)
        console.log(app + '+++++++++++');

注:.reduce()中要传入两个参数 一个是回调函数 一个是初始值

v-model:  绑定表单 双向绑定 实时绑定
v-model 绑定input  绑定radio 绑定checkbox 绑定select





******************************************************************webpack 的使用********************************************************************



<!-- 一一一一一一一******commex.js和ES6的导出方式不一样,认真看一下 
   Commed.js::::

    导出:module.exports={

    }
    导入:var {} = require('./ .../...')


  ES6 ::::::

    export {

    }
    import {} from './ .../....'  -->

<!-- 最终执行的命令( npx webpack ./src/main.js ./dist/bunss.js )就是 
    npx webpack '你要打包的src' '打包到哪里' 
   
   
二二二二二二******* 这个也是最终你html中script引用的src -->
<!-- 配置webpack 在项目里建一个 webpack.config.js文件 终端里输入 npm init 初始化npm然后在我们项目里生成一个package.json文件如果你这个package.json依赖其他文件,需要在终端输入npm install -->
<!-- 然后在package.json的script里面绑定 "build": "webpack" 这样就不用输入上面的一长串命令了 直接在终端输入  npm run build -->
<!-- 安装(在当前文件)局部webpack npm install webpack@3.6.0. --save-dev -->

<!-- 想要模块化加载css样式 1.在入口(main)中跟我们写的css文件(require('./css/nomal.css')或者 import css from 'file.css';)产生依赖关系,然后在终端中安装 npm install --save-dev css-loader -->
<!-- 然后在我们的webpack.config.js里面进行配置 
添加::
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ] *******'style-loader'这个暂时用不到,可以删除 
      }
    ]
  },
  此时我们npm run build 页面并没有发生改变,  以为css-loader只帮我们加载css,所以还需要一个style-loader安装完之后我们还是需要在webpack.config.js里面进行配置
     就是把我们上面删除的 'style-loader' 在加入原来的里面即可
接着是lss文件
第一部还是依赖 在main.js 里面写requore('./.....less') 此时运行时错误的,以为我们需要安装对呀的loader 既(npm install --save-dev less-loader@4.1.0 less@3.9.0)
接着我们还是需要在webpack.confjg.js里面进行配置添加下面内容::
 {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
}
然后就可以了 在终端输入npm run build 就可以在网页中看到效果

**********然后是img文件 安装url-loader  (npm install url-loader)
接着在webpack.config.js里面配置
 {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 当图片小于limit是会吧图片编程base64字符串形式
                        // 当加载的的图片大于时需要使用file - loader模块进行加载
                        limit: 9000 //大于 图片大小*1024
                    }
                    }]
}
******接着是ES6转ES5
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置 ::: {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
***********引用vue
安装 npm install vue
在main.js里导入Vue  import Vue from "vue"
const app = new vue({
  ................
})
此时npm fun build 还是不可以 会报一个版本的错误([Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.)
所以还是需要配置 记着 在(module.exports = {

})里面添加

 resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
使用模块化开发还是需要以下操作
在src里面建一个vue文件,用于写我们的vue文件 .vue结束
(<template>
   <div>
    <h2>{{message}}</h2>
    <button class="red" @click="btnclick">按钮</button>
   </div>
</template>

<script>
export default {
    name:'App',
      data() {
        return {
            message: 'hello'
        }

    },
    methods: {
        btnclick() {
            console.log(11);
        }
    }
}
</script>

<style >
    .red {
        background-color: red;
    }
</style>)
然后需要安装对应的vue loader
然后在main.js里面导入import App from './vue/app.vue'
接着是配置
在webpage.config.js 的rules里添加:
{
                test: /\.vue$/,
                use: ['vue-loader']
}
最后就可以使用了
 webpack插件的使用(版权)
 首先是在webpack.config.js里面引用const webpack = require('webpack')
 然后在下面配置  plugins: [
        new webpack.BannerPlugin('最终版权归吴玉配所有')
    ]
    (注音:跟rules并列)

webpack打包html
webpack.config.js里面引用const HtmlWepackPlugin = require('html-webpack-plugin')
然后在配置 ::plugins: [
        ......
        .........
        new HtmlWepackPlugin({
            template: 'index.html'
        })
    ]
注意模板问题

webpack js的压缩 
首先 npm 安装 npm install uglifyjs-webpack-plugin@1.1.1 --sava-dev
然后在webpack.config.js里面引用
-->







***************************************************************vue 脚手架***********************************************************
电脑必须安装node npm                     如果想快速安装这里建议用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

接着就是安装vue脚手架3 npm install -g @vue/cli

然后拉取脚手架2 npm install -g @vue/cli-init

然后就可以在你想要创建的项目的位置使用脚手架了  npm init webpack 项目名称