Vue学习遇到疑问的总结

最新推荐文章于 2020-12-21 13:48:36 发布

ita_code

最新推荐文章于 2020-12-21 13:48:36 发布

阅读量1.3k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_43490372/article/details/108893196

版权

vue里面的一些方法

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。（操作不了dom节点此方法在渲染html前调用）

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

onkeyup键盘事件监听

<div id="app">
    <button @click="getto" @keyup.13="getto">按钮</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        mounted() {
            var _this=this;
            document.onkeydown=function(ev){
                var e=ev||window.event;
                console.log(e.keyCode);
                if(e.keyCode==13){
                    _this.getto();
                }
            }
        },
        methods: {
            getto(){
                console.log("触发了事件");
            }
        },
    });
</script>
<input
        type="text"
        name=""
        placeholder="请输入手机号的前7位"
        class="input"
        id=""
        v-model="tel"
        @keydown.13="getTel"//监听文本框鼠标按下执行getTel方法
      />

redirect:重定向路由

export default {
    path: '/movie',
    component: () => import('@/views/Movie'),
    children: [
        // 城市
        {
            path: 'city',
            component: () => import('@/components/City')
        },
        // 正在热映
        {
            path: 'nowPlaying',
            component: () => import('@/components/NowPlaying')
        },
        // 即将上映
        {
            path: 'comingSoon',
            component: () => import('@/components/ComingSoon')
        },
        // 搜索
        {
            path: 'search',
            component: () => import('@/components/Search')
        },
        {
            path:'/movie',
            redirect:'/movie/nowPlaying'
        }
    ]
}

computed计算属性：依赖状态改变了，计算属性会重新执行一遍，调用第二次的计算属性会有缓存。

    <div id="app">
        <input type="text" name="" id="" @keydown.13="cx" @input="cx" v-model="value">
        <ul>
            <li v-for="item in getArr">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    arr: ['abb', 'eee', 'dss', 'wer', 'xcvdfg', 'dsf', 'aa', 'echo'],
                    value: '',
                }
            },
            computed: {
                // 一旦计算属性中的依赖状态发生改变，就会重新执行一遍函数
                getArr() {
                    return this.arr.filter(item=>item.indexOf(this.value)>-1);
                }
            },

        })
    </script>

ref&$refs通信:放在标签上是拿的原生节点，放在组件上拿到的是对象

 <div id="app">
        <input type="text" name="" id="" ref="mytext">
        <button  @click="add">add</button>
        <child  ref='mychild'></child>
    </div>
    <script>
        Vue.component('child',{
            template:`<div>
                <input type='button' value='按钮'>
                <p></p>
                </div>`,
                methods: {
                    ajj(data){
                        console.log("子组件方法",data);
                    }
                },
        })
        var app=new Vue({
            el:'#app',
            methods: {
                add(){
                    // ref  放在标签上是拿的原生节点
                    console.log("111",this.$refs);
                    this.$refs.mychild.ajj("组件传值");
                }
            },
            // ref  放在组件上 拿到的是对象
        })
    </script>