1.声明式渲染

vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

<!DOCTYPE html>
<html>
<head><title></title><script src="https://unpkg.com/vue"></script><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body><div id="app"><p>{{ message }}</p></div>
</body>
<script type="text/javascript">
new Vue({el: '#app',data: {message: 'Hello Vue.js!!!'}
})
</script>
</html>

绑定元素特性

<html><head><link rel="stylesheet" href="index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>  <script src="index.js"></script></body>
</html>

index.js

var app2 = new Vue({el: '#app-2',data: {message: '页面加载于 ' + new Date().toLocaleString()}
})

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

2.条件与循环

<div id="app-3"><p v-if="seen">现在你看到我了</p>
</div>var app3 = new Vue({el: '#app-3',data: {seen: true}
})

app3.seen = false，你会发现之前显示的消息消失了

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<!DOCTYPE html>
<html>
<head><title></title><script src="https://unpkg.com/vue"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol></div>
</body>
<script type="text/javascript">
var app4=new Vue({el: '#app-4',data: {todos:[{ text:'学习javascript'},{ text:'学习CSS'},{ text:'学习jquery'}]}
})
app4.todos.push({text:'新项目'})
</script>
</html>

3.处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆转消息</button>
</div><script type="text/javascript">
var app5=new Vue({el: '#app-5',data:{message:'hello vue.js!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')}}
})
</script>

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6"><p>{{ message }}</p><input v-model="message">
</div>var app6 = new Vue({el: '#app-6',data: {message: 'Hello Vue!'}
})

4.组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

<!DOCTYPE html>
<html>
<head><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><ol><!-- 创建一个 todo-item 组件的实例 --><todo-item v-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol></div>
</body>
<script type="text/javascript">// 定义名为 todo-item 的新组件
Vue.component('todo-item', {//template: '<li>这是个待办项</li>'props: ['todo'],template: '<li>{{ todo.text }}</li>'
})var app=new Vue({el:'#app',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]}
})
</script>
</html>

子单元通过 prop 接口与父单元进行了良好的解耦。

vue.js实战（一）相关推荐

vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
js 查错_7年前端开发经验的我，写了本Vue.js实战开发，开源高清PDF下载
Vue作为目前发展最迅速的前端框架越来越多的受到前端T程师青睐,Vue社区也是Web前端最活跃的社区之一. 更多的公司在转为Vue框架,但针对Vue优秀权威.实战的图书相对欠缺,梁灏著<Vue. ...
vue --- vue.js实战基础篇课后练习
练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1 练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10 思路: // 考虑到子模板的复用性,即在 ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
3.Vue.js 实战调查问卷WebApp项目
问卷调查demo已上传,欢迎大家指正,欢迎大家下载:https://download.csdn.net/download/lzb348110175/11085995 如果您没积分的话,可以私信/评论, ...
《Vue.js实战》第七章.组件
7.1 组件作用: 提高代码复用性,使项目易于维护 7.1 组件的使用 7.1.1 组件注册-全局注册全局注册后,任何vue的实例都可以使用该组件. Vue.component('my-compon ...
Vue.js实战——内置指令（二）
参考<Vue.js实战>梁灏 Vue内置指令第一部分:Vue.js实战--内置指令(一) 1 方法与事件 1.1 基本用法直接上代码,这样最实在: <!DOCTYPE html&g ...
Vue.js实战——表单与v-model
参考<Vue.js实战> 梁灏 1. 基本用法话不多说,来个入门: <!DOCTYPE html> <html><head><meta char ...
Vue.js实战——内置指令（一）
参考:<Vue.js实战>梁灏 1. 基本指令 1.1 v-cloak <!DOCTYPE html> <html><head><meta cha ...
[Vue.js] 一篇超级长的笔记，给《Vue.js 实战》划个重点
本文前言本笔记建立在书籍<Vue.js实战 / 梁灏编著>的基础上,旨在帮助有 Vue.js 基础的朋友快速回忆 Vue.js 的细碎内容.初学者建议阅读<Vue.js实战> ...

vue.js实战（一）

1.声明式渲染

2.条件与循环

3.处理用户输入

4.组件化应用构建

vue.js实战（一）相关推荐

最新文章

热门文章