js_脚本之家,Vue学习笔记入门篇

 联系我们     |      2020-03-28 10:44

修饰符是以半角句号 . 指明的特出后缀,用于提出三个限令应该以优越措施绑定。那篇作品给大家介绍Vue.js中.native修饰符,感兴趣的意中人齐声拜访吧。

正文为转发,原版的书文:Vue学习笔记入门篇——安装及常用命令介绍

合法对.native修饰符的疏解为:

介绍

Vue.js是及时相当红的多个JavaScript MVVM库,它是以数据驱动和组件化的思虑创设的。相比较于Angular.js,Vue.js提供了特别简明、更便于精通的API,使得大家能够非常的慢地上手并接收Vue.js。

偶尔,你大概想在有些组件的根成分上监听贰个原闯事件。能够使用 v-on 的梳洗符 .native 。譬喻:

安装

简短点清楚便是:

js_脚本之家,Vue学习笔记入门篇。CDN

https://unpkg.com/vue, 会保持和 npm 公布的前卫的版本雷同。可以在 https://unpkg.com/vue/ 浏览 npm 包财富。代码中平昔援用以下代码:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

给平日的HTML标签监听八个风云,之后增添 .native 修饰符是不会起功效的。比方:

澳门新葡亰平台游戏app,NPM

在用 Vue.js 构建大型应用时推荐应用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器同盟使用。 Vue.js 也提供配套工具来开辟单文件组件。

npm install vue
 click me

Hellow World示例

<div id="app">
    <p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el:'#app',
    data:{
        message:'Hello word'
    }
})

运作结果:

澳门新葡亰平台游戏app 1

此中app为Vue对象,el钦命成效在html的要素,即例子中<div id='app'></div>,data是多少对象,数据绑定最多管闲事的款型正是使用 “Mustache” 语法(双大括号)的文件插值。

JavaScript代码

常用命令

Vue.js的指令是以v-开头的,它们成效于HTML成分,指令提供了有的例外的风味,将下令绑定在要素上时,指令会为绑定的指标成分增多一些破例的行事,大家能够将下令看作特殊的HTML个性(attribute)。
Vue.js提供了一些常用的内置指令,接下去大家将介绍以下几个放置指令:

new Vue({ el: '#app', methods: { clickFun: function(){ console.log } }})

v-model

在表单控件恐怕零件上创立双向绑定
修饰符:

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤

演示代码:

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

在输入框输入内容时,其上方同步展现输入内容:

澳门新葡亰平台游戏app 2

给有个别组件的根成分上监听五个平地风波,之后加多 .native 修饰符就能起效能了。比方:

v-if

v-if是条件渲染指令,它依据他们表明式的真伪来删除和插入元素,它的为主语法如下:

v-if="expression"

expression是贰个回来bool值的表明式,表明式能够是三个bool属性,也得以是一个回去bool的运算式,如以下代码:

<div id="app-if">
    <p v-if="seen">你可以看见我</p>
</div>

    var app_if = new Vue({
        el:'#app-if',
        data:{
            seen:true
        }
    })

运转结果如下:

澳门新葡亰平台游戏app 3

固然您在调整台设置 app_if.seen=false 则"你可以预知自个儿"字样就能够收敛不见

JavaScript代码

v-show

v-show也是基准渲染指令,和v-if指令不一样的是,使用v-show指令的成分始终会被渲染到HTML,它只是轻便地为因素设置CSS的style属性。比方:

<div id="app-show">
    <p v-show="age > 25">Age:{{age}}</p>
</div>

    var app_show = new Vue({
        el:'#app-show',
        data:{
            age:28
        }
    })

运行结果如下:

澳门新葡亰平台游戏app 4

同样,假使在调整台修正app_show.age的值,假诺age>25的结果为false的话,分界面中的文本也会流失不见。

Vue.component('my-component', { template: `click me`})new Vue({ el: '#app', methods: { clickFun: function(){ console.log } }})

v-else

能够用v-else指令为v-if或v-show增多三个“else块”。v-else成分必需及时跟在v-if或v-show成分的后面——不然它不能够被识别。
示范代码:

<div id="app-else">
    <p v-if="age > 18">{{name}}的年龄是{{age}}岁,已成年</p>
    <p v-else>{{name}}的年龄是{{age}}岁,未成年</p>
</div>

    var app_else = new Vue({
        el:'#app-else',
        data:{
            name:'chain',
            age:17
        }
    })

运转结果如下:

澳门新葡亰平台游戏app 5

总结

v-for

v-for指令基于二个数组渲染三个列表,它和JavaScript的遍历语法雷同:

v-for="item in items"

items是叁个数组,item是眼下被遍历的数组成分。比方:

<div id="app-for">
    <ul v-for="item in items">
        <li>{{item}}</li>
    </ul>
</div>
var app_for = new Vue({
    el:'#app-for',
    data:{
        items:[
            'Vue',
            'Angular',
            'React'
        ]
    }
})

运作结果:

澳门新葡亰平台游戏app 6

上述所述是小编给我们介绍的Vue.js中.native修饰符,希望对大家有所扶植,假若我们有其余疑问请给自家留言,小编会及时过来大家的。在这里也特别谢谢大家对剧本之家网址的扶植!

v-bind

v-bind指令可以在其名目后边带二个参数,中间放叁个冒号隔断,那些参数经常是HTML成分的风味(attribute),举例:v-bind:class

v-bind:argument="expression"

修饰符:

.prop - 被用于绑定 DOM 属性。(what’s the difference?卡塔尔
.camel - (2.1.0+卡塔尔(قطر‎ 将 kebab-case 本性名转移为 camelCase. (从 2.1.0 开始援救卡塔尔国
.sync (2.3.0+State of Qatar 语法糖,会增加成一个更新父组件绑定值的 v-on 侦听器。
演示代码:

<div id="app-bind">
    ![](img_url)
</div>
var app_bind = new Vue({
    el:'#app-bind',
    data:{
        img_url:'https://cn.vuejs.orglogo.png'
    }
})

运维结果:

澳门新葡亰平台游戏app 7

v-on

绑定事件监听器。事件类型由参数内定。表达式可以是多个主意的名字或二个内联语句,若无修饰符也得以轻便。可缩写为@

用在平常成分上时,只好监听 原生 DOM 事件。用在自定义成分组件上时,也能够监听子组件触发的自定义事件。

在监听原生 DOM 事件时,方法以事件为独一的参数。就算接收内联语句,语句可以访问二个$event 属性: v-on:click="handle('ok', $event卡塔尔(قطر‎"
修饰符:

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 增加事变侦听器时使用 capture 形式。
.self - 只当事件是从侦听器绑定的要素本人触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根成分的原惹事件。
.once - 只触发叁回回调。
.left - (2.2.0卡塔尔国 只当点击鼠标左键时接触。
.right - (2.2.0卡塔尔(قطر‎ 只当点击鼠标右键时接触。
.middle - (2.2.0卡塔尔 只当点击鼠标中键时触发。
.passive - (2.3.0卡塔尔国 以 { passive: true } 形式加上侦听器

演示代码:

<div id="app-on">
    <p>{{message}}</p>
    <button @click="setMessage">Set Message</button>
</div>
var app_on = new Vue({
    el:'#app-on',
    data:{
        message:''
    },
    methods:{
        setMessage:function () {
            this.message='hello world';
        }
    }
})

点击按键后,结果如下:

澳门新葡亰平台游戏app 8

原创博文,转发请表明出处
归来目录
下一节:Vue学习笔记入门篇——数据及DOM