实例：Vue.js只关注视图层
下载地址：
https://vuejs.org/js/vue.min.js
{{ message }}
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
message: &＃39;Hello Vue!&＃39;
}
})
鼠标悬停
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
message: &＃39;Hello Vue!&＃39;
}
})
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
seen: true
}
})
条件循环
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
dos: [
{ text: &＃39;Javascript&＃39; },
{ text: &＃39;Vue&＃39; },
{ text: &＃39;项目&＃39; }
]
}
})
// v-on 添加一个事件监听器
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
message: &＃39;Hello Vue.js&＃39;
},
methods: {
Message: function () {
this.message = this.message.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;)
}
}
})
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
message: &＃39;Hello Vue!&＃39;
}
})
组件
Vue.component(&＃39;do-item&＃39;, {
template: &＃39;dashucoding&＃39;
})
v-for="item in List"
v-bind:todo="item"
v-bind:key="item.id"
>
var app = new Vue({
el: &＃39;#app&＃39;,
data: {
List: [
{ id: 0, text: &＃39;1&＃39; },
{ id: 1, text: &＃39;2&＃39; },
{ id: 2, text: &＃39;吃的东西&＃39; }
]
}
})
计算器：
添加class类样式
style
数据绑定
{{msg}}
v-once执行一次
{{msg}}
...
...
...
...
build |
项目构建 |
config |
配置目录 |
mode_modules |
npm加载的项目依赖模块 |
src |
开发的目录 |
static |
静态资源目录 |
test |
初始测试目录 |
index.html |
入口文件 |
package.json |
项目配置文件 |
实例：
{{site}}
{{url}}
{{det()}}
v-html="message"
v-bind:class="{&＃39;class1&＃39;: use}"
v-bind:id="id"
v-if="seen"
123
v-if v-else v-else-if
{{ message.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;) }}
Vue代码
v-cloak, v-bind:, v-on: 学习
倒序效果
{{ msg }}
事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获事件的机制
.self 实现只点击当前元素，才会触发事件
.once 只触发一次事件
v-model 指令
结言好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
京公网安备 11010802041100号