前端开发者| 慕课网前端开发付费教程百度云 |
| dw前端开发教程 百度云 |
| web前端实战开发视频教程 |
####咱不说它的起源，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>vue</title>
</head>
<body>
<div id=”app”>{{ message }}</div>
<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前端开发视频教程下载 |
| 高级前端开发视频教程 |
| 微专业前端开发教程 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册