码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2.x基础学习

时间:2019-01-24 01:13:00      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:单选   content   官网   组件   body   属性   获取   component   idt   

1. Hello Vue

技术分享图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- 引入Vue 通过BootCDN引入 -->
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
</head>
<body>
        
    <!-- 定义一个div 设置id class都可以 -->
    <div id="app">
        <!-- 直接可以引用data对象里面的属性 -->
        {{text}}
    </div>
    <script>
        // 创建Vue实例
        var myVue = new Vue({
            // el 代表选择一个元素  值是选择器 是id就用#开头 class就.开头
            el: #app,
            // data 定义数据
            data: {
                text: Hello Vue
            }
        })
    </script>
</body>
</html>
View Code

 

2. 一个问题

如果Vue.js放在最后面就现加载html, 结果就能看到{{text}}, 解决办法有两个

技术分享图片
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- 引入Vue 通过BootCDN引入 -->
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>

    <style>
        /* CSS里面用属性选择器, 选择之后把他隐藏, 这是Vue提供的 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 第一种设置属性然后通过css隐藏 -->
        <span v-cloak>{{text}}</span><br>

        <!-- 第二种用 v-text -->
        <p v-text="text">如果有文本内容会被覆盖掉</p>
    </div>
    <script>
        var myVue = new Vue({
            el: #app,
            data: {
                text: Hello Vue
            }
        })
    </script>
</body>

</html>
View Code

 

3. v-html

就和innerHTML的效果一样

技术分享图片
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- 引入Vue 通过BootCDN引入 -->
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>

</head>

<body>

    <div id="app">
        <p v-html="text">如果有文本内容会被覆盖掉</p>
    </div>
    <script>
        var myVue = new Vue({
            el: #app,
            data: {
                text: <h1>你好Vue</h1>
            }
        })
    </script>
</body>

</html>
View Code

 

4. 设置自定义属性和简写形式
 
效果和setAttribute一样可以在审查元素的时候看到属性
技术分享图片
<div id="app">
    <!-- 
        v:bind: 这种写法是基本写法
        直接冒号开头是简写
     -->

     <!-- "" 双引号可以是表达式, 可以是data里面的属性  -->
    <p 
        v-bind:title="text" 
        :text="text" 
        :compute="1+1"
        v-text="text"

    >
        {{text}}
    </p>
</div>

 <script>
    var myVue = new Vue({
        el: #app,
        data: {
            text: 你好Vue
        }
    })
</script>
View Code

 

5. 条件判断
<div id="app">
    <ul>
        <li v-if="num > 3">大于</li>
        <li v-else-if="num < 3">小于</li>
        <li v-else>等于</li>
    </ul>
</div>
<script>
    var myVue = new Vue({
        el: #app,
        data: {
            num: 2
        }
    })
</script>

6. 模板语法
<div id="app">
    <ul>
        <li>
            {{ num > 1 ? true : false }}
            <!-- 支持Math和Date -->
            {{ new Date() }}
        </li>
    </ul>
</div>
<script>
    var myVue = new Vue({
        el: #app,
        data: {
            num: 2
        }
    })
</script>

 

7. 事件处理
<div id="app">
    <!-- 简写用@开头, click, 依次类推其他事件 -->
    <!-- 
        v-on:click 原来的
     -->

    {{num}}
    <button @click="setVal">点我啊</button>
</div>
<script>
    var myVue = new Vue({
        el: #app,
        data: {
            num: 2
        },
        methods: {
            setVal: function() {
                this.num++;
            }
        },
    })
</script>

 

8. 循环
技术分享图片
<div id="app">
<!-- 
    语法
        in 和 of

        v-for="value, index in obj"

        v-for="value, attr, index of list"
 -->
    <ul>
        <!-- 最好绑定一个key 从而重用和重新排序现有元素 -->
        <li 
            v-for="item in nums"
            :key="item.id"
        >
            {{item.text}} <a href="">{{item.label}}</a>
        </li>
    </ul>
    <!-- @click 直接绑定一个方法 -->
    <button @click="setVal">点我啊</button>
</div>
<script>
    var myVue = new Vue({
        el: #app,
        data: {
            nums: ‘‘
        },
        // methods定义方法的对象, 里面定义着方法等待被使用
        methods: {
            setVal: function() {
                this.nums = [
                    {id: 1, text: Hello world, label:JavaScript},
                    {id: 2, text: echo 1;, label:PHP},
                    {id: 3, text: <html></html>, label:HTML},
                ]
                return this.nums
            }
        },
    })
</script>
View Code

 

 
9. 表单处理
技术分享图片
<div id="app">

        <!-- 表单用 v-model="属性" -->
        <!-- 普通文本框直接操作字符串 -->
        <h3>text和textarea</h3>
        <p><input type="text" v-model="inputText"></p>
        <p><textarea name="" v-model="inputText" id="" cols="30" rows="10"></textarea></p>
        <p>{{inputText}}</p>


        <!-- 单选框获取的是value -->
        <h3>radio单选框</h3>
        <p><input type="radio" name="1" value="男" v-model="radio" id=""></p>
        <p><input type="radio" name="1" value="女" v-model="radio" id=""></p>
        <p>{{radio}}</p>


        <!-- 多个复选框用数组 -->
        <h3>多选框</h3>
        <p>
            <input type="checkbox" name="1" value="true" v-model="chkName" id="">
            <input type="checkbox" name="2" value="false" v-model="chkName" id="">
            <input type="checkbox" name="3" value="obj" v-model="chkName" id="">
        </p>
        <!-- chkName是一个数组选择一个自动添加到数组里面 -->
        <p>{{chkName}}</p>

        <p>
            <!-- 多选择也是数组 -->
            <h3>多选择</h3>
            <select name="" id="" v-model="chkName" multiple>
                <option value="请选择" disabled selected>请选择</option>
                <option value="666">6666</option>
                <option value="222">6666</option>
                <option value="663336">6666</option>
                <option value="66446">6666</option>
            </select>
        </p>
        <p>{{chkName}}</p>


        <!-- 渲染多个 -->
        <p>
            <select name="" v-model="chkName">
                <!-- :value 要用冒号开头才可以使用val.value 不让它直接渲染val.value这个字符串 -->
                <!-- :value 可以绑定一个对象, 到时候获取的时候就是一个对象 -->
                <option :value="{ number: 123 }">123</option>
                <option :value="val.value" :key="val.id" v-for="val in optionVal">
                    {{ val.text }}
                </option>
            </select>
        </p>
        <p>{{chkName}}</p>

        <p>
            <!-- 输入完成后去除收尾空格 -->
            <input v-model.lazy.trim="msg" type="text">
            {{noSpace}}
        </p>
       
    </div>
View Code

 

10. class和style
技术分享图片
<style>
    .active {
        color: #0f0;
    }

    .text-danger {
        color: #f00;
    }

    .static {
        font-size: 20px;
    }
</style>
<div id="app">
    <!-- style设置 -->
    <p :style="{fontSize: 24 + ‘px‘ }">24</p>

    <!-- class设置 -->
    <!-- class存在与否取决于一个布尔值isActive -->
    <!-- 可以用原来的class 也可以用:class这个更高级 -->
    <p class="static" :class="className">6666</p>
    <p :class="classList">11111111111111</p>
    <button @click="setClass">点我啊</button>
</div>
<script>

    var vm = new Vue({
        el: #app,
        data: {
            className: {
                active: true,
                text-danger: false
            },
            classList: [{ active: true }, { text-danger: false }]
        },
        methods: {
            setClass() {
                this.className.active = !this.className.active;
                this.className[text-danger] = !this.className[text-danger];
            }
        },
    })
</script>
View Code

 

11. 组件基础
<div id="app">
    <item></item>
</div>
<script>
    Vue.component(item, {
        data: function() {
            return {
                count: 0
            }
        },
        template: `
            <button @click="count += 1">{{count}}</button>
        `
    })

    var myVue = new Vue({
        el: #app,
        data: {
            nums: ‘‘
        }
    })
</script>

 

 

 

Vue2.x基础学习

标签:单选   content   官网   组件   body   属性   获取   component   idt   

原文地址:https://www.cnblogs.com/mutaim/p/10306843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!