初学vue

最新推荐文章于 2023-05-13 21:52:33 发布

转载最新推荐文章于 2023-05-13 21:52:33 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yangk1996/p/10844034.html

文章标签：

#javascript #前端 #后端 #ViewUI

一概述

　　目前前端三大框架中的vue很是大火，而且现在的项目也是前后端分离居多。公司前端主要使用的是vue。如果后端一点前端知识也不懂的话，这样写出来的接口也不是很好。为此也打算简单的学习一下vue,这样在联调接口的时候也可以少出现一点问题，能在书写接口的时候也考虑到前端方面。

二 vue的实例结构与Hello World

　　因为是入门学习，使用的是通过script标签引入的vue

    <script src="../lib/vue-2.4.0.js"> </script>
</head>
<body>
    <div id="app">
        <!-- 根据属性取出数据 -->
        <p>{{ msg }}</p>
    </div>
    <script>
        //创建一个vue的实例
        var vm = new Vue({
            el: '#app',//表示当前new的这个vue的实例，要控制页面的那个区域
            //定义数据的地方
            data: {
                msg: "欢迎学习vue"
            },
            //定义js的方法
            methods: {
            }
        })
    </script>
</body>

三一些指令的学习

　　上面的Hello World是通过{{msg}}是直接取值，这样会在网络环境差的时候和刷新网页的时候出现闪烁问题，也就是没有直接出"欢迎学习vue"，出现的是{{msg}},这样虽然没有什么太大问题，但是页面体验感觉总不是太好。

v-cloak 可以解决闪烁问题
默认v-text 是没有闪烁问题的，会覆盖标签的元素中原本的内容，插值表达式只会替换占位符的内容，不会覆盖原来的内容
v-html将得到的内容当作html解析

    <style>
          /*任何没有加载好的，都不直接显示插值表达式*/
        [v-cloak] {
            display: none
        }
    </style>
</head>
<body>

    <div class="app">

        <P v-cloak> ============== {{msg}} -----------------</P>

        <h4 v-text="msg">=========</h4>

        <div>{{msg1}}</div>

        <div v-text='msg1'></div>

        <div v-html='msg1'></div>
    </div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: "123",
            msg1: '<h1>我是一个标题</h1>'
        },
        methods:{
        }
    })
</script>

v-bind的作用是绑定属性 v-bind：属性名=“mytitle” 也可以简写为：属性名="value+'123123' "
v-on的作用是事件绑定 v-on:事件="函数名" 简写为 @事件="函数名"

<body>
    <div class="app">
        <!--绑定属性的指令 v-bind：-->
        <input type="button" value='按钮' v-bind:value='mytitle'>

        <input type="button" value='按钮' :value="mytitle+'123123'"><br>

        <!-- v-on  定义vue的事件-->
        <input type="button" value="按钮" v-on:click="show">
        <input type="button" value="按钮1" @click="show">

    </div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            mytitle: '这是一个自己定义的标题'
        },
        methods:{
            show:function(){
                alert('hello');
            }
        }
    })
</script>

v-model 可以实现双向绑定只能用于表单元素

<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <!-- v-model 可以实现双向绑定只能用于表单元素-->
        <input type="text" v-model="msg">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "欢迎学习vue"
            }
        })
    </script>
</body>

v-for 循环数组

<body>
    <div id="app">
        <!-- 循环普通数组 -->
        <div> <p v-for="item in list">{{item}}，</p></div>

        <!-- 对象数组 -->
        <div> <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p></div>

        <!-- 循环对象 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引 -->
        <div> <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p></div>

        <div>
            <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
            <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
            <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
            <p v-for="item in list1" :key="item.id">
                {{item.id}} --- {{item.name}}</p>
            </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1, 2],
                id: '',
                name: '',
                list1: [
                    { id: 1, name: 'zs1' },
                    { id: 2, name: 'zs2' }
                ],
                user: {
                    id: 1,
                    name: '张三',
                    gender: '男'
                }
            },
        })
    </script>

v-if 每次都会重新删除或创建元素有较高的切换性能消耗
v-show 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式有较高的初始渲染消耗

<body>
    <div id="app">
        <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
        <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
        <h3 v-if='flag'>这是v-if控制元素</h3>

        <h3 v-show='flag'>这是v-show控制的元素</h3>

        <input type="button" value="按钮" @click='toggle'>
        <input type="button" value="按钮1" @click="flag=!flag">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
                toggle() {
                    this.flag = !this.flag
                }
            }

        })
    </script>