vue各模块功能范围，webpack属性配置

最新推荐文章于 2022-11-15 12:56:17 发布

Yoyo_Yan

最新推荐文章于 2022-11-15 12:56:17 发布

阅读量1k

点赞数 2

分类专栏： vue 前端

本文链接：https://blog.csdn.net/learn_incsdn/article/details/81315892

版权

前端同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

2018-8-25

父子组件传递数据 - props

父组件通过子的属性值进行传递，方式有二：
- 常量: prop1=”常量值”
- 变量: :prop2=”变量名”

子组件需要声明

根据属性props:[‘prop1’,’prop2’]
在页面中直接使用{{prop1}}

在js中应该如何使用prop1？

this.prop1获取

在父组件中：
<template>
    <div>
        //引用子组件
        <header-vue textOne="大"></header-vue>
        <body-vue :textTow="text2"></body-vue>
        <footer-vue></footer-vue>
    </div>
</template>
<script>
//引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'

export default {
    data(){
        return {
            text2: body,
        }
    },
    methods:{},
    props: [
        'textTwo',
        'textOne'
    ]
}
</script>

在子组件中：
<template>
    <div>
        我是{{textOne}}头
    </div>
    <div >
        我是body,{{textTwo}}
    </div>
</template>
<script>
  export default {
    data () {
         return {}  
    },
    methods: {},
    //子组件接收父组件传来的值，在props中定义传来的变量
    props: [
        'textOne'，
        'textTwo'
    ]
  }
</script>

声明全局组件

main.js

<script>
// 1. 引入vue
import Vue from 'vue';

import App from './app.vue'

// 2. 引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'

// 3. 声明全局组件
Vue.component('headerVue', headerVue); //注册一个组件，第一个参数是名称，在template中使用；第二个参数是实际的对象，显示成什么内容，具备什么功能
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);

</script>

2018-8-21

父子组件的使用

在父组件中：
<template>
    <div>
        //引用子组件
        <header-vue></header-vue>
        <body-vue></body-vue>
        <footer-vue></footer-vue>
    </div>
</template>
<script>
//引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'

export default {
    data(){
    },
    methods:{},

    //必需要声明
    components:{
        //组件名（在模板中使用）  :组件对象
        headerVue: headerVue,
        body
    }
}
</script>

SPA结构？https://segmentfault.com/a/1190000000607661
微前端的设计理念与实践初探

2018-8-20

*methods和on
- 绑定事件的方法：
+ ‘v-on:事件名=”表达式||事件名”’
+ 简写：’@事件名=”表达式||事件名”’
- 韩树明没有参数是，可以省略(),只写一个函数名
- 在export default这个对象的跟属性加上methods属性，其是一个对象
+ key是函数名，也是函数体
- 在export default这个对象的跟属性上加上data，其是一个函数，返回一个对象
+ 对象的属性是我们初始化对象变量的名称
- 在script中能使用的对象，在template中也能使用；
在script中加this，在template中不加this
* v-for
- 可以使用操作数组(item,index)
- 可以使用操作对象(value,key,index)
- key 是类似于track by的属性，为了告诉vue，js中的元素与页面之间的关联，当试图删除元素的时候，是个单元的删除而不是替换，所以要关联其关系。

2018-8-19

vue中常用的v-指令

v-next

    <span v-next="text"></span>
    <input type="text" name="" v-text="text">

    data () {
       return {
           text:我是v-text玩的东西
       }
    }

v-html 是元素的innerHTML，不能包含表达式{{}}

<span v-html="html"></span>

data () {
   return {
       text: '我是v-text玩的东西',
       html: `
            <ul>
                <li>xxx</li>
                <li>yyy</li>
            </ul>
       `
   }
}

v-if 元素是否移除或者插入
v-show
v-model 双向数据绑定
JavaScript v-model: <input type="text" v-model="mTest"> {{mTest}} <br> v-bind： <input type="text" v-bind:value="mTest">
v-bind:value 给value赋值，v-bind是单向的，内部的改变影响显示的改变

class结合v-bind使用

需要根据可变的表达式的结果来给class赋值，就需用到v-bind:class=”xxx”
class：结果的分类
- 取一个返回一个字符串(三元表达式和对象清单)
- 取多个，返回一个对象(样式做key，true和false做值)

v-bind:属性名=”表达式”，最终表达式的运算结果赋值给该属性名

简化的写法是：:属性名="表达式"

    //取一个
    <div>
        <div v-bind:class="isRed?'red':'green'"></div>
    </div>

    isRed:true,

    <style>
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>

    //取多个
    <div v-bind:class="{'red':true,'big':'true'}">多个class</div>

    <style>
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .big{
        font: 30px;
    }
</style>

复杂例子：通过遍历，根据当前对象的成绩，匹配成绩和样式清单对象，用成绩做key，取对象的value，最终返回字符串做样式名

    <ul>
        <li v-for="stu in stus" :class="{'A':'red','B':'green'[stu.grade]}">
            {{stu.name}}
        </li>
    </ul>

    stus: [{name:'jack', grade:'A'},{name:'rose',grade:'B'}]

2018-8-13

对象属性的声明

var name = 'abc';
var person = {name};  // => var person ={name: name};
// 当属性的key和变量的名相同，而要使用变量的值做value。就可以简写成{name}

函数的声明(干掉了函数function)

var cal = {
    add: function(){
        return 1;
    },
    add2(){
        return 2;    //  add1与add2相等
    },


    add3: function(n1,n2){
        return n1 + n2;
    },
    add4(n1,n2){
        return n1 + n2;
    }                  //  add3与add4相等
}

vue单文件方式
单文件就是以.vue结尾的文件。最终通过webpack编译成.js在浏览器运行
内容： + +
1：template中只能有一个根节点
2：script中，按照exportdefault{配置}来写
3：style中，可以设置scope属性，让其只在template中生效
以单文件的方式启动
webpack找人来理解你的单文件代码
- vue-loader， vue-template-compiler，代码中依赖vue

例子:

1. 挖坑
<body>
    <div id="app"></div>
    //以上是一个坑，vue文件写好之后往里填
</body>

2. 引入vue
import Vue from 'vue';
import App from './app.vue'

3. 创建vue实例。一般一个项目组都是一个实例来完成显示
new Vue({
    //渲染内容的目的地
    el: '#app',
    //渲染内容
    render: function(creater){    //  render渲染，是个属性.
       return creater(App);   //App包含template/script/style，最终生成DOM结构
    },
    以上相当于 rander：'DOM结构'

        //a. 当render:function参数为一个的时候，小括号可以省略
        //b. 当代码只有一行且返是回值的时候，可以省略大括号
        //c. 可以写成render: c => c(App)

    data(){

    }
})

<template>
    <div id="app"></div>
</template>
<script>
    export default {

    }
</script>
<style scope>

</style>

vue介绍
my_project
- node_modules 文件都依赖于node_modules
  - node包的查找机制是逐级向上查找
  - 项目中就一个，对应src的使用
- src 存放人可以看懂的源代码，具有一定的功能划分，MVC
  - 命令行：
    - webpack立刻读取webpack.config.js文件，生成到dist目录下
    - webpack-dev-server 运行src下的代码，虚拟出build.js测试
- dist 存放真实上线的代码（减少请求，混淆代码），机器能看懂
- webpack.congig.js 打包生成dist下的代码
- package.json文件包信息描述
  - 里面全是依赖，如果没有，运行npm i(全部恢复)
  - npm i --production （只恢复dependencies）
  - npm init-y 就能创建出package.json文件

2018-8-8

学习笔记：

$nextTick

2018-7-31

获取DOM元素

救命稻草，前端框架就是为了减少DOM操作，但是在特定情况下，也留了后门
在指定的元素上，添加ref=”名称A”
在获取的地方加入 this.$refs.名称A
- 如果==ref放在了原生DOM元素上==，那么获取的就是原生DOM对象
  - 可以直接操作
- 如果==ref放在了组件元素上==，那么获取的就是组件对象
  - 1: 获取到DOM对象，通过this. $refs.名称.$ el，进行操作
- 对应的事件
  - created 完成了数据的初始化，此时还未生成DOM，无法操作DOM
  - mounted 将数据已经装在到了DOM之上，可以操作DOM

==ref放在了原生DOM元素上==

两个可能获取数据的过程：
- 组件创建后，数据已经完成初始化，但是DOM还未生成
 created(){
     console.log('====created:',this.$ref.myDiv);
 }
数据装载后，各种数据已经就位，将数据渲染到DOM上，Dom已经生成
 mounted:{
     console.log('==== mounted:',this.$refs.myDiv);

     //直接操作DOM
     this.$refs.myDiv.innerHTML = '哈哈';

     //由于是双向数据绑定，还是操作数据比较好
     this.text = "嘻嘻";
 }
==ref放在了组件元素上==
   mounted:{
       console.log('====sub:',this.$refs.sub)

       //获取组件对象并获取到其DOM对象
       //console.log('====sub:',this.$refs.sub.$el)
       //this.$refs.sub.$el.innerHTML = '嚯嚯';
   }

app.js

项目的入口模块，一切的请求o都要先进入这里进行处理。调用router.js进行路由分发处理。

router.js

只负责分发路由，不负责业务逻辑处理。调用controller进行业务逻辑处理。

controller

只负责处理业务，不负责处理数据的CRUD。调用model层处理数据的CRUD。

model层

只负操作数据库，执行对应的sql。

view层

每当用户操作界面，，如果需要进行业务处理，都会通过网络请求去请求后端服务器，这个会被app.js检听到。

CRUD：

C: create
R: read
U: update
D: delete

MVVM

VM层是M层和V层之间的调度者：
M: M是保存的是每个页面中单独的数据
VM: 他是一个调度者，分割了M和V（M和V不能互相调用），每当v层想要获取或保存数据时，都要由VM做中间的处理。提供了数据的双向绑定。
V: V是每个单独页面的HTML结构

webpack属性配置

const path = require('path')
module.exports = {
    enter:{  //main是默认入口，也可以是多入口
    main: './src/main.js',   
    },
    //出口
    output:{
        filename:'./build.js'   //指定js文件
        path: path.jion(_dirname, '..', 'dist')  //代表当前目录上一级的dist
    }，
    module: {
        //一样的功能rules:  webpack2.x之后新加的
        loaders: [              //require('./a.css || ./a.js')
            {   test: /\.(jpg|svg)$/,

                loader:'style-loader!css-loader',
                //顺序是反过来的  2！1
                loader: 'url-loader?limit=4096&name=temp.[ext]',

                //[name].[ext]是内置提供的，因为本身是先读这个文件
                options: {
                    limit: 4096,
                    name: '[name].[ext]'
                }
            }
        ]
    },
    plugins:[
    //插件的执行顺序是依次执行的
    new htmlWebpackPlugin({
        template: './src/index.html'
    })
    //将src下的template属性描述的文件根据当前配置的output.path，将文件移到该目录
    ]
}

多个插件之间用 ‘|’ 分割；多个loader之间用 ‘!’ 分割

webpack-ES6的处理

ES6的模块，vue本身女神默认支持es6的模块导入
(import xxx from '../compontment')
babel
- babel-loadder(内部依赖babel-core)
  - 关键字(presrts es2015)
  - 函数(plugins babel-plugin-transpform-runtime)

过滤器

组件内的过滤器就是option中的一个filters的属性(一个对象)
- 多个key就是不同过滤器名，多个value就是与key对应的过滤方式函数体
全局过滤器：Vue.filter(名，fn)
总结
- 全局过滤器：范围大，如果出现同名时，权利小
- 组件内过滤器：如果出现同名时，权力大，范围小

//组件内过滤器
<template>
    <div>
        Please input
        <input type="text" name="" v-model="text"/>
        output: {{text | myFilter}}
    </div>
</template>
<script>
    export default {
        filters: {
            myFilter: funtion(value){  //value就是text
                //输入的内容进行反转
                //转换成数组->翻转数组->转换成字符串
                return value.split('').reverse().join('');
            }
        },
        data() {
            return {
                text: ''
            }
        }
    }
</script>

//main.js
//全局过滤器
Vue.filter('myFilter',funtion(value){
    return '我是全局过滤器'；
}

全局过滤器和组件内过滤器都有时，++组件内过滤器起作用++。也就是更精准的起作用，可以类比css中的样式。

//app.vue
<template>
    <div>
        <sub-vue></sub-vue>
    </div>
</template>
<script>
    import SubVue from './sub.vue';
    export default {
        filters: {
            myFilter: funtion(value) {  //value就是text
                //输入的内容进行反转
                //转换成数组->翻转数组->转换成字符串
                return value.split('').reverse().join('');
            }
        },
        data() {
            return {
                text: ''
            }
        },
        components: {
          subVue: SubVue
        }
    }
</script>

//sub.vue
    <template>
      <div>
        {{'大家好，我是sub | myFilter'}}
      </div>
    </template>

    <script>
    export default {
      data(){
        return{
        }
      }
    }
    </script>

Yoyo_Yan

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue各模块功能范围，webpack属性配置

app.js 项目的入口模块，一切的请求o都要先进入这里进行处理。调用router.js进行路由分发处理。 router.js 只负责分发路由，不负责业务逻辑处理。调用controller进行业务逻辑处理。 controller 只负责处理业务，不负责处理数据的CRUD。调用model层处理数据的CRUD。 model层 ...
复制链接

扫一扫