自学Vue第二天

第二天

选项对象

<div id="app">
    <p v-on:click="clickHandle">{{ message }}</p>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
            message: 'hi Vue'
        },
        methods: {
            clickHandle () {
                alert('hello, Vue!')
            }
        }
    })
</script>

methods反转字符串

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello, Vue!'
        },
        methods: {
            reverseMessage () {
                // console.log(this.message.split(''))
                this.message  = this.message.split('').reverse().join('')
            }
        }

    })
</script>

{{}}只能使用表达式

<div id="app">
<!--    <p>{{ if(flag) { 'yes' } else { 'no' } }}</p>-->
    <p>{{ flag ? 'yes' : 'no' }}</p>
    <!-- {{ 只能使用JS表达式，不能使用JS语句 }} -->
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
            flag: false
        }
    })

    // if(flag) {
    //
    // } else {
    //
    // }
    // let a = 1;
    // let b = 2
    // console.log(a + b) //
</script>

v-html

<div id="app">
    <p v-html="message"></p>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
            message: '<p style="text-align: center;">\n' +
                '    <strong><em>hello 1902B</em></strong>\n' +
                '</p>'
        }
    })
</script>

v-if VS v-show

基本差别

v-if动态创建标签，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show通过css中的display来动态控制显示或隐藏，不管初始条件是什么，元素总是会被渲染
使用场景

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-show一般会用在切换比较频繁
v-if切换不频繁的
v-if 、 v-else 、 v-else-if

template包裹元素，不会出现在DOM结构中

   <div id="app">
        <template v-if="seen">
            <p>AAA</p>
            <p>AAA</p>
            <p>AAA</p>
        </template>
    </div>
    <script>
        const vm = new Vue({
            el: '#app', // 挂载点
            data: { // 咱们的数据 这里是和模板发生关系的地方
                seen: true
            }
        })
    </script>

v-for ☆

遍历数组

<div id="app">
    <ol>
        <li v-for="item in todos">{{ item.text }}</li>
    </ol>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
            todos: [
                {
                    text: 'JavaScript'
                },
                {
                    text: 'React'
                },
                {
                    text: 'Vue2.0'
                }
            ]
        }
    })
</script>

遍历对象

<div id="app">
    <ol>
        <li v-for="value in obj">{{ value }}</li>
    </ol>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
           obj: {
               firstName: '二师兄',
               lastName: '猪八戒',
               age: '咱也不知道'
           }
        }
    })
</script>

v-if VS v-for

v-for的优先级高于v-if 和 v-show

<div id="app">
    <ol>
        <li v-for="item in arr" v-if="item.flag">{{ item.title }}</li>
    </ol>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
           arr: [
               {
                   title: '熊大',
                   flag: true
               },
               {
                   title: '熊二',
                   flag: true
               },
               {
                   title: '强哥',
                   flag: false
               }
           ]
        }
    })
</script>

v-class

v-bind:class 指令也可以与普通的 class 属性共存

<div id="app">
    <span class="fontSize" v-bind:class="{ red: addClass }">hello, Vue</span>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
           addClass: true
        }
    })
</script>

v-bind:style

<div id="app">
    <span v-bind:style="styleObj">hello, Vue</span>
</div>
<script>
    const vm = new Vue({
        el: '#app', // 挂载点
        data: { // 咱们的数据 这里是和模板发生关系的地方
           styleObj: {
               color: 'red',
               fontSize: '100px'
           }
        }
    })
</script>

过滤器

本地(局部)过滤器

<div id="app">
    <p>{{ msg | firstUpper }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
           msg: 'abc'
        },
        // 定义局部过滤器
        filters: {
            firstUpper(val) {
                return val.charAt(0).toUpperCase() + val.slice(1)
            }
        }
    })
</script>

全局过滤器

<div id="app">
    <p>{{ msg | firstUpper }}</p>
</div>
<script>
    // 全局过滤器
    Vue.filter('firstUpper', val => {
        return val.charAt(0).toUpperCase() + val.slice(1)
    })
    new Vue({
        el: '#app',
        data: {
           msg: 'abc'
        }
    })
</script>

过滤器传参

<div id="app">
    <p>{{ msg | firstUpper('1') }}</p>
</div>
<script>
    // 全局过滤器
    Vue.filter('firstUpper', (val, index) => {
        return val.slice(0, index) + val.charAt(index).toUpperCase() + val.slice(Number(index) + 1)
    })
    new Vue({
        el: '#app',
        data: {
           msg: 'abc'
        }
    })
</script>

过滤器的串联

<div id="app">
    <p>{{ msg | firstUpper('1') | connect }}</p>
</div>
<script>
    // 全局过滤器
    Vue.filter('firstUpper', (val, index) => {
        return val.slice(0, index) + val.charAt(index).toUpperCase() + val.slice(Number(index) + 1)
    })
    Vue.filter('connect', val => {
        return val.split('').join('-')
    })
    new Vue({
        el: '#app',
        data: {
           msg: 'abc'
        }
    })
</script>

作业

商品分类