vue初

style的绑定

 <div id="app">
            <!--绑定单个类样式-->
            <div v-bind:class="{active:isActive}"></div>
            <!--绑定多个类样式-->
            <div v-bind:class="{active:isActive,bd:hasBorder}"></div>
            <!--使用对象的方式绑定类样式-->
            <div v-bind:class="classObject"></div>
            <!--使用数组绑定-->
            <div v-bind:class="[classA,classB]"></div>
            <!--三元表达式-->
            <div v-bind:class="[classA, isB ? classB : '']"></div>

            <!--内联样式的绑定-->
            <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
                vue 内联样式的绑定
            </div>
        </div>
//样式的绑定
    1. v-bind:class="{active:isActive}
     当绑定的数据isActive的值为true时,就会为该元素添加类样式
    2. v-bind:class="{active:isActive,bd:hasBorder}" 
                   支持混合类样式绑定,即同时绑定多个类样式
    3. v-bind:class="classObject"
                   支持使用对象绑定类样式
    4. v-bind:class="[classA,classB]"
    5. <div v-bind:class="[classA, isB ? classB : '']">
        当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            hasBorder: true,
            classObject: {
                active: true,
                bd: true
            },
            //内联样式
            size: 19,
            width: 200,
            bgcolor: 'red',
            //数组形式
            classA: "a",
            classB: 'b',
            isB: true
        }
    })
</script>

条件渲染

<div id="app">
            <!--在这里加入模型数据-->
            {{ message }}
            <!--这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。-->
            <p v-if="greeting">Hello!</p>
            <!--bool值可以使条件表达式-->
            <p v-if="Math.random()>0.5">根据随机值判断是否显示</p>
            <!--使用v-if配合template可以实现模板渲染-->
            <template v-if='bool'>
                <h1>{{header}}</h1>
                <p>{{paragraph}} 1</p>
                <p>{{paragraph}} 2</p>
                <ul>
                    <li v-for="data in array">{{data}}</li>
                </ul>
            </template>
        </div>
<script>
    var viewModel = {
        //模型数据的初始化
        message: 'hello world!',
        greeting:true,
        bool:true,
        header:"这是一个标题",
        paragraph:"这是一个段落",
        array:[1,2,3,4]

    }

    // viewModel    连接模型和数据库
    var vm = new Vue({
        el: '#app',
        data: viewModel,

    })
</script>

列表渲染

<div id="app">
            <!--view-->
            <ul>
                <span v-for="n in 10">{{n}}</span>
            </ul>
            <ul>
                <!--简单的列表渲染-->
                <li v-for='data in liData1'>
                    {{data}}
                </li>
            </ul>

            <ul>
                <!--复杂的列表渲染-->
                <li v-for='data in liData2'>
                    {{data.text}}
                </li>
            </ul>

            <ul>
                <!--添加index-->
                <li v-for="(data,index) in liData2">
                    {{data.text}}=======index===={{index}}
                </li>
            </ul>

            <!--模板语法-->
            <ul>
                <h2>模板渲染</h2>
                <template v-for="item in items">
                    <li>{{ item.name }}</li>
                    <li class="divider">{{item.age}}</li>
                </template>
            </ul>
        </div>
<script>
    //    model
    var dataModel = {
        num: 10,
        liData1: [1, 2, 3],
        liData2: [{
            text: "这是一段文本"
        }, {
            text: "这是一段文本"
        }, {
            text: "这是一段文本"
        }, {
            text: "这是一段文本"
        }],
        items: [{
            name: 1,
            age: 1
        }, {
            name: 2,
            age: 2
        }]
    }

    // viewModel
    var app = new Vue({
        el: '#app',
        data: dataModel
    })
</script>

指令总结 v-bind 可以绑定属性,包括class style,而已省略,使用:替代 在1vue.0中有三种修饰符,.sync,.once,.camel,在2.0中能够废弃了前面两个 .camel将绑定的特性的名称转化为驼峰法则命名

v-model 随着表单控件的不同而有所不同 可以添加修饰符 .lazy .number .trim

v-if v-else-if v-else v-show 可以配合模板使用 v-if和v-show两者都可以实现元素的状态切换,但是两者存在一些区别 v-if根据判断条件决定是否渲染,如果条件为假,不进行任何操作 v-show无论如何都会进行模块的渲染,只是简单的基于css 的切换 一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。 因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

v-for 可以配合模板使用,也可以单独进行列表和表格的渲染

v-on 进行事件的绑定,可以省略,使用@替代 类似于原生js的事件绑定的方式

  1. 获取dom元素
  2. 进行事件的添加
  3. 添加事件处理函数

v-text 绑定文本

v-html 绑定html标签

v-once 不需要表达式 只绑定一次,数据修改时,模型上面的数据不会再动态渲染到页面上

v-pre 不需要表达式 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

自定义指令 除了内置指令,Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象。 也可以用组件的 directives 选项注册一个局部自定义指令。

全局自定义指令

<div id="app">
            <p>页面载入时,input 元素自动获取焦点:</p>
            <input v-focus>
  </div>
<script type="text/javascript">
    //注册一个全局自动以的指令 v-focus
    Vue.directive('focus', {
        //绑定的元素插入到父节点时调用
        inserted: function(el) {
            //聚焦元素
            el.focus()
        }
    })
    //创建vue的实例
    var vm = new Vue({
        el: "#app"
    })
</script>

局部自定义指令

<div id="app">
            <p>页面载入时,input 元素自动获取焦点:</p>
            <input v-focus>
  </div>
<script>
    // 创建根实例
    new Vue({
        el: '#app',
        directives: {
            // 注册一个局部的自定义指令 v-focus
            focus: {
                // 指令的定义,当指定的元素绑定到父元素时调用
                inserted: function(el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        }
    })
</script>

钩子函数及其参数 1.0版本中的钩子函数 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新 unbind: 只调用一次, 指令与元素解绑时调用。

2.0新增的钩子函数 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

钩子函数

 <div id="app">
            <div v-if='message'>
                <input type="text" v-my-directive="message" v-model='message'/>
            </div>
        </div>
<script>
    //指令名称          有了指令    能干什么
    Vue.directive('my-directive', {
        //第一次绑定的时候调用        只调用一次
        bind: function(el, binding, vnode, oldnode) {
            console.log('bind    ', arguments)
        },
        //被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)
        inserted: function(el) {
            console.log("inserted")
        },
        //更新的时候调用
        update: function() {
            console.log('updata')
        },
        //解绑定的时候调用
        unbind: function() {
            console.log('unbind   ', arguments)
        },

        //组件完成一个周期调用
        componentUpdated: function() {
            console.log("componentUpdated")
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
            message: "hello"
        }
    })

    vm.$data.message = 1000;
</script>

钩子函数的参数和binding参数的属性 钩子函数的四个参数和binding参数的六个个属性

 <div id="app">
            <input type="text" v-focus="message" v-model='message' />
  </div>
<script>
    Vue.directive('focus', {
        //自定义指令的其中一个钩子函数:bind       钩子函数有四个参数
        bind: function(el, binding, vnode,oldnode) {
            //el : element  
            console.log(el)//div id=app
            //六个属性
            console.log(binding.name)//focus
            //:后面
            console.log(binding.arg)//hello---arguments

            console.log(binding.modifiers)//{a:true,b:true}

            console.log(binding.expression)//message

            console.log(binding.value)//菜鸟教程!

            console.log(binding.oldValue)//只有在数据更新的时候才有
        },
        update:function(el,binding){
            console.log(el)
            console.log(binding.value)
            console.log(binding.oldValue)
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            message: '菜鸟教程!'
        }
    })


    vm.$data.message = "1000"
</script>

vue2.0中的变化 钩子函数 1.0中 bind:只调用一次,在指令第一次绑定到元素上时调用。 update: 在 bind 之后立即以初始值为参数第一次调用,之后每当绑定值变化时调用,参数为新值与旧值。 unbind:只调用一次,在指令从元素上解绑时调用。 函数的参数/实例属性 1.0中 所有的钩子函数将被复制到实际的指令对象中,钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性: el: 指令绑定的元素。 vm: 拥有该指令的上下文 ViewModel。 expression: 指令的表达式,不包括参数和过滤器。 arg: 指令的参数。 name: 指令的名字,不包含前缀。 modifiers: 一个对象,包含指令的修饰符。 descriptor: 一个对象,包含指令的解析结果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

JavaScript 中 Property 和 Attribute 的区别详解

最近看企鹅群 ,发现li的value有个‘好玩’的默认“规则”,搜索一番发现是Property 与Attribute 的缘故,无奈最初不清楚,最后搜到如下一篇文...

882
来自专栏前端大白专栏

angular2报错 Expression has changed after it was checked

2753
来自专栏飞雪无情的博客

Go语言实战笔记(二十六)| Go unsafe 包之内存布局

unsafe,顾名思义,是不安全的,Go定义这个包名也是这个意思,让我们尽可能的不要使用它,如果你使用它,看到了这个名字,也会想到尽可能的不要使用它,或者更小心...

742
来自专栏对角另一面

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。 在阅读本...

2020
来自专栏听雨堂

JS代码和网页的混用

今天写一个代码,遇到这个情况:大的DIV嵌了一个小的DIV,大的DIV的宽度我是通过复杂的机制替换完成,现在小的div需要显示边框,但它又不能使用大的DIV的...

22010
来自专栏菜鸟计划

vue组件详解(二)——使用props传递数据

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是...

9778
来自专栏C/C++基础

web前端开发初学者十问集锦(5)

(1)立即执行函数的定义 立即执行函数(Immediately Invoked Function)是在页面加载时立即被执行的函数。

922
来自专栏软件开发

前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

62710
来自专栏前端知识分享

第22天:js改变样式效果

1、alert:弹出警示框(用的非常少,用户体验不好) 完整写法:window.alert(“执行语句”); window对象,窗口,一般情况可省略 alert...

1261
来自专栏大前端_Web

jquery常用函数及技巧(持续更新)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1271

扫码关注云+社区

领取腾讯云代金券