前端开发Vue.js 写法

慕课网前端开发付费教程百度云
dw前端开发教程 百度云
web前端实战开发视频教程

####咱不说它的起源,直接上代码:

1.Hello vue
html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>vue</title>
    </head>
    <body>
        <div id=”app”>{{ message }}</div>
        <script src=”https://cdn.bootcss.com/vue/2.1.4/vue.js”></script>
        <script>
            new vue({
                el: ‘#app’,
                data: {
                    message: ‘Hello vue.js!’,
                },
            })
        </script>
    </body>
</html>

2.####指令—循环—循环数组
html 代码

<!– Vue 1 这么写 –>
<li v-for=”item in items”>第{{ $index }}条:{{ item.message }}</li>
<div v-for=”item in items” track-by=”id”>
    <!– Vue 2 这么写 –>
    <li v-for=”(item, index) in items”>第{{ index }}条:{{ item.message }}</li>
    <div v-for=”item in items” v-bind:key=”item.id”></div>
</div>

3.循环对象
html 代码

<!– Vue 1 这么写 –>
<li v-for=”(key, value) in obj”></li>
<!– Vue 2 这么写 –>
<li v-for=”(value, key) in obj”></li>

4.循环数字
html 代码

<span v-for=”n in 10″>{{ n }} </span>
<!– Vue 1 从0开始,Vue 2从1开始 –>

5.条件
html 代码

<!– 如果ok为false, 不输出在 HTML 中 –>
<div v-if=”ok”>Yes</div>
<div v-else>No</div>
<!– 如果ok为false,只是 display:none 而已 –>
<h1 v-show=”ok”>Hello!</h1>

6.事件绑定
html 代码

<button v-on:click=”say(‘hi’)”>点击</button>
<!– 简写 –>
<button @click=”say(‘hi’)”>点击</button>
<!– 传入 event 对象 –>
<button @click=”say(‘hi’, $event)”>点击</button>
<!– 阻止单击事件冒泡 –>
<button @click.stop=”doSth”>点击</button>
<!– 阻止默认行为 –>
<button @submit.prevent=”doSth”>点击</button>
<!– 修饰符可以串联 –>
<a @click.stop.prevent=”doThat”></a>
<!– 按键修饰符:回车时才会执行 –>
<input @keyup.13=”submit” /><!– 13 为 keycode –>
<input @keyup.enter=”submit” />
<!– 支持的全部按钮为 enter, tab, delete, space, up, down, left, right 字母 –>

7.表单的双向绑定
html 代码

<input type=”text” v-model=”message” />
<!– 自定义选中值。否则 选中为value值,不选为空 –>
<input
    type=”checkbox”
    v-model=”toggle”
    v-bind:true-value=”a”
    v-bind:false-value=”b”
/>

8.绑定属性
html 代码

<div v-bind:class=”{ ‘class-a’: isA, ‘class-b’: isB }”></div>
<div v-bind:class=”classArr”></div>
<!– classArr 是一个数组 –>
<!– 简写 –>
<div :class=”{ ‘class-a’: isA, ‘class-b’: isB }”></div>
<div :style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”></div>
<img :src=”imgSrc” />
<a :href=”baseURL + ‘/path'”>
    <!– 在 Vue 2 中,如果属性值是变量,必须用绑定属性的写法。 –>
    // wrong <img src=”{{imgSrc}}”/> // right <img :src=”imgSrc”
/></a>

9.避免闪烁: v-cloak
html 代码

[v-cloak] { display: none; }
<div v-cloak>{{ message }}</div>

不会显示 <div> 的内容,直到编译结束。

10.单向绑定 :单向绑定的意思是,即使绑定变量的值发生变化,显示的内容仍旧就是最初绑定时候的值。
html 代码

<!– Vue 1 这么写 –>
<span>This will never change: {{* msg }}</span>
<!– Vue 2 不支持 –>

11.输出 HTML
html 代码

<!– Vue 1 这么写 –>
<div>{{{ raw_html }}}</div>
<!– {{}} 中的 HTML 内容的会转为纯文本 –>
<!– Vue 2 这么写 –>
<div v-html=”raw_html”></div>

12.计算属性
html 代码

<div id=”demo”>{{ fullName }}</div>
new Vue({ data: { firstName: ‘Foo’, lastName: ‘Bar’ }, computed: { fullName:
function () { return this.firstName + ‘ ‘ + this.lastName } } });

13.自定义指令
html 代码

Vue.directive(‘my-directive’, {
bind: function () {
// 准备工作
// 例如,添加事件处理器或只需要运行一次的高耗任务
this.el;// 添加指令的元素
this.vm.$get(name)// 获得该指令的上下文 ViewModel
this.expression;// 指令的表达式的值
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如,删除 bind() 添加的事件监听器
}
})
    <div v-my-directive=”someValue”></div>

14.监听数据变化
html 代码

new Vue({
    data: {
        firstName: ‘Foo’,
    },
    watch: {
        firstName: function(val, oldVal) {},
    },
})

15.自定义过滤器
html 代码

Vue.filter(‘wrap’, function (value, begin, end) {
    return begin + value + end;
});
    <!– ‘hello’ => ‘before hello after’ –>
        <!– Vue 2 这么写 –>
        <span v-text=”message | wrap(‘before’, ‘after’)”></span>

16.生命周期相关的钩子函数
html 代码

// Vue 2
new Vue({
    created: function() {},
    mounted: function() {}, // 相对与 1 中的 ready
    beforeDestroy: function() {},
    destroyed: function() {},
})

17.过渡效果
html 代码

<!–Vue 1 这么写–>
    <divv-if=”show”transition=”my-transition”></div>
    <!–Vue 2 这么写–>
        <transition v-bind: name=”my-transition”>
            <!– … –>
        </transition>
/* 必需 */
.my – transition – transition {
    transition: all .3s ease;
}
/* .my-transition-enter 定义进入的开始状态 */
.my – transition – enter{}
/* .my-transition-leave 定义离开的结束状态 */
.my – transition – leave { }

更多详情,请移步Vue.js官网

web前端开发视频教程下载
高级前端开发视频教程
微专业前端开发教程
» 本文来自:前端开发者 » 《前端开发Vue.js 写法》
» 本文链接地址:https://www.rokub.com/6942.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!