Vue.js

最新推荐文章于 2025-06-12 09:58:37 发布

weixin_33971130

最新推荐文章于 2025-06-12 09:58:37 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xpz-python/p/11063340.html

版权

一、Vue基础知识

1.知识补充：

箭头函数：

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) { 
  return element.length; 
}); // 返回数组：[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

2.通过id找元素索引：

// 如何根据id找到要删除的索引
                this.list.some((item,i) => {
                    if(item.id == id){
                        this.list.splice(i,1)
                        // 找到了，终止循环
                        return true
                    }
                })

             var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        // 终止循环
                        return true
                    }
                })

3.过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

<div id="app">
    {{msg | myFilter('疯狂')}}
</div>
<script>
    // 定义全局过滤器
    Vue.filter('myFilter', function (msg,arg) {
        return msg.replace(/单纯/g, arg)
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '单纯的我，单纯的世界，单纯的心灵'
        },
        methods: {}
    })
</script>

4.Vue生命周期函数

var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Vue生命周期'
        },
        methods: {
            show() {
                console.log('执行了show方法')
            }
        },
        // 第一个生命周期函数，表示实例完全被创建出来之前执行
        beforeCreate() {
            // 注意：在beforeCreate生命周期函数执行的时候，data和methods没有初始化
        },
        // 第二个生命周期函数
        created() {
            // 如果要调用data和methods最早在这里
            console.log(this.msg)
        },
        // 第三个生命周期函数，表示模板已经在内存中编辑完成了，尚未渲染到页面
        beforeMount() {
            //console.log(document.getElementById('h3').innerText)
            // 在beforeMount执行的时候，页面元素没有被真正替换过来
        },
        // 第四个生命周期函数，表示内存中的模板已经挂载到了页面
        // mounted是实例创建期间的最后一个生命周期函数，执行完mounted生命周期就创建好了
        mounted() {
            console.log("mounted方法" + document.getElementById('h3').innerText)
        }
    })

5.通过vue-resource 发送http请求

// global Vue object
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

全局配置数据接口的根域名
Configuration
Set default values using the global configuration.

Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';
Set default values inside your Vue component options.

new Vue({

  http: {
    root: '/root',
    headers: {
      Authorization: 'Basic YXBpOnBhc3N3b3Jk'
    }
  }

})
Note that for the root option to work, the path of the request must be relative. This will use this the root option: Vue.http.get('someUrl') while this will not: Vue.http.get('/someUrl').

6.组件注册

全局注册

// 方式一
<div id="app">
<!--如果要使用，直接把组件名称，以html标签的形式引入页面-->
    <my-com1></my-com1>
</div>
<script>
    // 1.1使用Vue.extend 来创建全局的Vue组件
    // 1.2使用Vue.component('组件的名称'，创建出来的组件模板对象)
    Vue.component('myCom1',Vue.extend({
        template:'<h3>这是 Vue.extend 创建的组件</h3>' // 通过template属性，指定html要展示的内容
    }))
    // 创建Vue实例，得到ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>

// 方式二
<div id="app">
    <mycom3></mycom3>
</div>
<!--在被app控制的外面-->
<template id="templ">
    <div>
        <h1>这是通过template元素，在外部定义的组件结构，有代码提示</h1>
        <h4>好用，不错</h4>
    </div>
</template>
<script>
    Vue.component('mycom3', {
        template: '#templ'
    })

    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
</script>

局部注册

<div id="app">
    <login></login>
</div>
<template id="templ">
    <h1>这是私有的组件</h1>
</template>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            // 定义实例内部私有组件
            login:{
                template:'#templ'
            }
        },
    })
</script>

组件中的data

<div id="app">
    <mycom1></mycom1>
</div>
<script>
    // 1.组件可以有自己的data数据
    // 2.组件中的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须为一个方法
    // 3.组件中的data必须为一个方法，方法内部还必须返回对象
    // 4.组件中的data和实例中的data使用方式完全一样
    Vue.component('mycom1', {
        template: '<h1> {{msg}}</h1>',
        data: function () {
            return {
                msg: 'Hello global component'
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {}
    })
</script>

为什么组件中的data必须为一个方法？是为了组件之间不共享数据。

<div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
</div>
<template id="tmpl">
    <div>
        <input type="button" value="值+1" @click="increament">
        <h3>{{count}}</h3>
    </div>
</template>
<script>
    var dataObj = {count: 0}
    // 这是一个计数器，身上有个按钮，每当点击按钮，让data中的count值+1
    Vue.component('counter', {
        template: '#tmpl',
        data: function () {
            // return {count: 0}
            return dataObj
        },
        methods: {
            increament() {
                this.count++
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>

不同组件之间的切换

// 方法一：使用 v-if
<div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>
    <login v-if="flag" ></login>
    <register v-else="flag"></register>
</div>

<script>
    Vue.component('login',{
        template:'<h3>登录组件</h3>'
    })
    Vue.component('register',{
        template:'<h3>注册组件</h3>'
    })
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{}
    })
</script>

// 方法一：使用 component 标签
<div id="app">
    <a href="" @click.prevent="componentName ='login' ">登录</a>
    <a href="" @click.prevent="componentName ='register' ">注册</a>
    <!--Vue提供了component，来展示对应名称的组件-->
    <!--component是一个占位符，:is属性，可以用来指定来展示的组件的名称-->
    <component :is="componentName"></component>
</div>
<script>
    Vue.component('login', {
        template: '<h3>登录组件</h3>'
    })
    Vue.component('register', {
        template: '<h3>注册组件</h3>'
    })
    var vm = new Vue({
        el: '#app',
        data: {
            componentName: 'login'
        },
        methods: {},
    })
</script>

父组件向子组件传值

<div id="app">
    <!--父组件，可以在引用子组件的时候，通过 属性绑定 v-bind 的形式，把需要传递给子组件的数据，以属性绑定的形式，
    传递到子组件内部-->
    <com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'123 啊，父组件中的数据'
        },
        methods: {},
        components: {
            // 结论，经过演示，子组件中，默认无法访问父组件中的data和methods
            com1:{
                // 子组件中的 data 数据，并不是父组件传递的，是私有的
                // data中的数据可读可写
                data:function(){
                  return {
                      title:'123',
                      content:'hahahah'
                  }
                },
                template:'<h3>这是子组件---{{parentmsg}}</h3>',
                // 注意：组件中的 所有的 props 中的数据，都是通过 父组件传递给子组件的
                // props中的数据都是只读的
                props:['parentmsg']
            }
        }
    })
</script>

父组件向子组件传递方法

<div id="app">
    <!--通过v-on:func="show" 将父组件的show方法传递给子组件-->
    <com2 @func="show"></com2>
</div>
<template id="tmpl">
    <div>
        <h2>这是子组件</h2>
        <input type="button" @click="myclick" value="子组件按钮-点击触发父组件">
    </div>
</template>
<script>
    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
        // 加载id为templ的template元素的内容，作为组件的html结构
        template: '#tmpl',
        data() {
            return {
                sonmsg: {
                    name: '小头儿子',
                    age: 6
                }
            }
        },
        methods: {
            myclick() {
                // 点击子组件按钮，如何 触发父组件的方法？
                // $emit 触发调用
                this.$emit('func', 123, this.sonmsg)
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            datamsgFromSon: null
        },
        methods: {
            show(data, data2) {
                console.log('调用了父组件身上的 show 方法:-----' + data + data2)
                this.datamsgFromSon = data2
                console.log(this.datamsgFromSon)
            }
        },
        components: {
            com2
        }
    })
</script>

转载于:https://www.cnblogs.com/xpz-python/p/11063340.html