前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布

vue初

作者头像
河湾欢儿
发布2018-09-06 17:24:36
1K0
发布2018-09-06 17:24:36
举报
文章被收录于专栏:河湾欢儿的专栏

style的绑定

代码语言:javascript
复制
 <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>

条件渲染

代码语言:javascript
复制
<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>

列表渲染

代码语言:javascript
复制
<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 选项注册一个局部自定义指令。

全局自定义指令

代码语言:javascript
复制
<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>

局部自定义指令

代码语言:javascript
复制
<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: 被绑定元素所在模板完成一次更新周期时调用。

钩子函数

代码语言:javascript
复制
 <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参数的六个个属性

代码语言:javascript
复制
 <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: 一个对象,包含指令的解析结果。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档