Vue学习笔记一

day01

一、模板

二、 mustache插值操作

三、v-html

四、v-pre

五、v-cloak

六、v-bind

七、v-bind绑定class

八、v-bind动态绑定style

九、计算属性

十、函数的增强写法

十一、v-on

十二、v-if

十三、key解决复用问题

十四、v-show和v-if的区别

十五、v-for遍历数组和对象

十六、v-for绑定和非绑定key的区别

十七、数组中的响应式方法

十八、过滤器filters

十九、filter函数

二十、map函数

二十一、reduce函数

二十二、v-model双向绑定

二十三、v-model与radio的结合

二十四、v-model与CheckBox的结合

二十五、v-model与select的结合

   

一、模板

     <div id="app">
        <h2>{{message}}</h2>
        <ul>
            <li v-for='i in movies'>{{i}}</li>
        </ul>
        <div>{{count}}</div>
        <button v-on:click='add'>+++</button>
        <button v-on:click='count--'>---</button>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    message:'Helloween！！',
                    movies:['姜子牙', '哪吒', '星际穿越', '喜羊羊与灰太狼'],
                    count:0,
                },
                methods: { // 方法
                    add:function(){
                        this.count++
                    }
                },
            }
        )
    </script>

 二、mustache插值操作

<div id="app">

           <h2 v-once>{{name1}}</h2> 

        <h2>{{name1}}{{name2}}</h2>
        <h2>{{name1+name2}}</h2>
        <h2>{{num*2}}</h2>
    </div>
    <script>        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    name1:'jack',
                    name2:'rose',
                    num:100,
                },
            }
        )
    </script>

三、v-html='url'

<div id="app">
        <h2>{{url}}</h2>
        <h2 v-html='url'>{{url}}</h2>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    name1:'jack', 
                    url:"<a href='http://www.baidu.com'>百度一下</a>",
                },
            }
        )
    </script>

四、v-pre

<div id="app">
        <h2>{{name1}}</h2>
        <h2 v-pre=>{{name1}}</h2>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    name1:'jack', 
                },
            }
        )
    </script>

五、v-cloak

六、v-bind

<div id="app">
        <img v-bind:src="imgurl">
        <!-- 语法糖 -->
        <img :src="imgurl">
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                imgurl:'图片/back1.png',
                },
            }
        )
    </script>

七、v-bind绑定class

<div id="app">
        <h1 :class="{active:isactive,line:isline}">helloworld!</h1>
        <button v-on:click='btn'>点击</button>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data: {  // 定义数据
                    isactive: true,
                    isline: true,
                },
                methods: {
                    btn: function () {
                        this.isactive = !this.isactive
                    }
                },

            }
        )
    </script>

八、v-bind动态绑定style

<div id="app">
            <div v-bind:style="{ color: activeColor, fontSize: fontSize+ 'px' }">好好学习</div>
            <div v-bind:style="styleObject">天天向上</div>
</div>


<script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeColor: 'blue',
                fontSize: 30,
                styleObject: {
                    color: 'green',
                    fontSize: '50px'
                }
            }
        })
</script>

 九、计算属性

<div id="app">
        <h2>{{getfullname()}}</h2>
        <h2>{{fullname}}</h2>
    </div>


    <script>
        const app = new Vue(
            {
                el: '#app',
                data: {
                    name1: 'jack',
                    name2: 'rose',
                },
                computed: { //computed计算属性
                    fullname:function(){
                        return this.name1+this.name2
                    }
                },
                methods: {
                    getfullname() {
                        return this.name1 + this.name2
                    },
                }
            }
        )
    </script>

计算属性二

<div id="app">
        <h1>{{totalscore}}</h1>
    </div>

    <script>
        const app = new Vue(
            {
                el: '#app',
                data: {
                    book: [
                        { name: 'math', score: 97 },
                        { name: 'english', score: 100 },
                        { name: 'policy', score: 100 }
                    ]
                },
                computed: { //computed计算属性
                    totalscore: function () {
                        let sum = 0
                        for (let i = 0; i < this.book.length; i++) {
                            sum = sum + this.book[i].score
                        }
                        return sum
                    }
                },
            }
        )
    </script>

完整的计算属性get和set

<div id="app">
        <h1>{{totalscore}}</h1>
    </div>

    <script>
        const app = new Vue(
            {
                el: '#app',
                data: {
                    book: [
                        { name: 'math', score: 97 },
                        { name: 'english', score: 100 },
                        { name: 'policy', score: 100 }
                    ]
                },
                computed: { //computed计算属性
                    totalscore: {
                        get: function () {
                            return this.book
                        },
                        set: function (newname) {
                            this.book = newname
                        }
                    }
                },
            }
        )
    </script>

十、函数的增强写法

methods: { // 方法
                    // 函数原来的写法
                    // add:function(){
                    //     this.count++
                    // }
                    // 函数的增强写法
                    add() {
                        this.count++
                    }
                },

十一、v-on的使用

<div id="app">
        <div>{{count}}</div>
        <button v-on:click='count--'>---</button>

         <!-- 如果方法没有参数，可以省略括号 -->

        <button v-on:click='add'>+++</button>
        <!-- 语法糖 -->
        <button @click='add'>+++</button>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    count:0,
                },
                methods: { // 方法
                    add(){
                        this.count++
                    }
                },
            }
        )
    </script>

v-on修饰符的使用

<!-- 修饰符的使用 -->
        <!-- 1  .stop -->
        <button @click.stop='add'>stop</button>

        <!-- 2  .prevent -->
        <form action="baidu">
            <input type="submit" @click.prevent='sbt'>
        </form>

        <!-- 3  keyup监听键盘的某个按键 -->
        <input type="text" @keyup.enter='confirm'>

        <!-- 3  .once -->
        <button @click.once='add'>+++</button>



<script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    count:0,
                },
                methods: { // 方法
                    add(){
                        this.count++
                        console.log('+++++++')
                    },
                    subt(){
                        console.log('sssssss')
                    },
                    confirm(){
                        console.log('eeeeee')
                    }
                },
            }
        )
    </script>

十二、v-if 

<div id="app">
        <p v-if='score>90'>A</p>
        <p v-else-if='score>80'>B</p>
        <p v-else='score>70'>C</p>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    score:80
                },
                methods: { // 方法
                    
                },
            }
        )
    </script>

十三、key解决复用问题

 十四、v-show和v-if的区别

十五、v-for遍历数组和对象

<ul>
            <li v-for='m in movies'>{{m}}</li>
        </ul>
        <!-- 遍历数组和其索引 -->
        <ul>
            <li v-for='(m,index) in movies'>{{(index+1)+m}}</li>
        </ul>

        <!-- 遍历对象 -->
        <!-- 只包含value -->
        <ul>
            <li v-for='value in person'>{{value}}</li>
        </ul>
        <!-- 包含value和key -->
        <ul>
            <li v-for='(value,key) in person'>{{value+key}}</li>
        </ul>
        <!-- 包含value、key和索引 -->
        <ul>
            <li v-for='(value,key,index) in person'>{{value+key+index}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue(
            {
                el: '#app', // 要管理的元素
                data:{  // 定义数据
                    movies:['姜子牙', '哪吒', '星际穿越', '喜羊羊与灰太狼'],
                    person:{
                        name:'jack',
                        age:18,
                        sex:'male'
                    }
                },
            }
        )
    </script>

十六、v-for绑定和非绑定key的区别

十七、数组中的响应式方法

<div id="app">
            <ul>
                <li v-for='i in movies'>{{i}}</li>
            </ul>
            <button @click='btnc'>添加</button>
        </div>
        <script>
            const app = new Vue(
                {
                    el: '#app', // 要管理的元素
                    data:{  // 定义数据
                        movies:['姜子牙', '哪吒', '星际穿越', '喜羊羊与灰太狼'],
                        count:0,
                    },
                    methods: { // 方法
                        btnc(){
                            //this.movies.push('大闹天宫')//在数组的末尾添加一个元素
                            //this.movies.push('大闹天宫','aaaa','bbbbb')//在数组的末尾添加多个元素
                            //this.movies.pop()  //在数组的末尾删除元素
                            //this.movies.shift()  //在数组的头部删除一个元素
                            //this.movies.unshift('二郎神')  //在数组的头部添加一个元素
                            //this.movies.unshift('二郎神','虾米嗷嗷')  //在数组的头部添加多个元素
                            //splice：删除、插入、替换
                            this.movies.splice(0,2)  //第二个参数表示删除几个元素
                            this.movies.splice(0,2,'m','l','o','d')  //第二个参数表示删除几个元素,后面的元素表示要插入的元素
                            this.movies.sort()
                            this.movies.reverse()
                        }
                    },
                }
            )
        </script>

 十八、过滤器filters

<div id="app">
        <table>
            <tr v-for='i in subjects'>
                <td>
                    {{i.name}}
                </td>
                <td>
                    {{i.sc|total}}
                </td>
            </tr>
        </table>
       
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                subjects: [
                    { name: 'math', sc: 90 },
                    { name: 'math', sc: 90 },
                    { name: 'math', sc: 90 },
                    { name: 'math', sc: 90 }
                ]
            },
            filters: {
                total(sc){
                    return sc+'分'
                }
            },

        })
    </script>

十九、filter函数

<script>
     let num=[1,6,3,99,155,85]
    //filter内的函数必须返回布尔值
    let newnum=num.filter(function(n){
        return n<100
    })

    </script>

二十、map函数

let num=[1,6,3,99,155,85]
let new=num.map(function(n){
        return n*n
    })

二十一、reduce函数

let num=[1,6,3,99,155,85]
 //计算num所有元素的和
let sum=num.reduce(function(pre,n){
        return pre+n
    },0)

二十二、v-model双向绑定

<div id="app">
        <input type="text" v-model='message'>{{message}}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               message:'sassasd',
            },
        })
    </script>

二十三、v-model与radio的结合

<div id="app">
         <label for="male">
            <input type="radio" name='sex' value='male' id="male" v-model='sex'>男
        </label>
        <label for="female">
            <input type="radio" name='sex' value='female' id="female" v-model='sex'>女
        </label>
        <p>{{sex}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               message:'sassasd',
               sex:'',
            },
        })
    </script>

二十四、v-model与CheckBox的结合

<div id="app">
        <!-- 单选框 -->
        <label for="agree">
            <input type="checkbox" id='agree' value="agree" v-model='agree'>
        </label>
        <p>{{agree}}</p>

        <!-- 多选框 -->
        <input type="checkbox" value="篮球" v-model='hoobbies'>
        <input type="checkbox" value="足球" v-model='hoobbies'>
        <input type="checkbox" value="排球" v-model='hoobbies'>
        <p>{{hoobbies}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               message:'sassasd',
               sex:'',
               agree:false,
               hoobbies:[],
            },
        })
    </script>

二十五、v-model与select的结合

<div id="app">
        <select v-model='subjects'>
            <option value="math">math</option>
            <option value="chinese">chinese</option>
            <option value="policy">policy</option>
        </select>
        <p>{{subjects}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               subjects:[],
            },
        })
    </script>