~~~
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h4>声明式渲染 </h4>
<i>Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统</i><br>
文本插值
<div id="app" style ="border:solid 1px red; ">
{{ message }}
</div>

<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
注:<sub>所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。</sub>
<hr/>
指令绑定
<div id="app-2" style ="border:solid 1px red; ">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
注:<sub>v-bind 特性被称为指令</sub>
<hr>
<h4>条件与循环</h4>
控制一个元素显示
<div id="app-3" style ="border:solid 1px red; ">
<p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
注:<sub>继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。</sub>
<hr>
v-for 指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4" style ="border:solid 1px red; ">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script type="text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
</script>
注：<sub>在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。</sub>
<hr>
<h4>处理用户输入</h4>
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<div id="app-5" style ="border:solid 1px red; ">
<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>
注：<sub> reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。</sub>
<hr>
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6" style ="border:solid 1px red; ">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script type="text/javascript">
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
<hr>
<h4>组件化应用构建</h4>
<div id="app-7" style ="border:solid 1px red; ">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
遍历groceryList 取出每个item,查看组件定义
todo.text取出text
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script type="text/javascript">
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
注：<sub>在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。</sub>

</body>
</html>
~~~

Vue 核心最基本的功能的更多相关文章

  1. vue - vue基础/vue核心内容（终结篇）

    今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...

  2. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  3. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  4. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. BitAdminCore框架应用篇：（四）核心套件querySuite按钮功能

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...

  6. Vue+Vuex 实现自动登录功能

    刚刚实现了Vue+Vuex的自动登录功能,在实现的时候遇到了一些问题,这里记录一下: 因为这个还不够完善,在写完下列代码后,又进行了补充,可以从https://www.cnblogs.com/xiao ...

  7. Vue项目之实现登录功能的表单验证！

    Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属 ...

  8. VUE+Element 前端应用开发框架功能介绍

    前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...

  9. vue.js核心最基本的功能

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: , text: , text: , text: '随便其它什么人吃的东西' } ] }}) 蔬菜 奶酪 随便其 ...

随机推荐

  1. Anaconda3环境下安装OpenCV(cv2)

    Anaconda3环境下安装OpenCV(cv2) 主要步骤 1 首先查看自己的Anaconda安装的python版本 2 下载相应的OpenCv.whl文件 3 使用cmd安装.whl文件 查看自己 ...

  2. Journal of Proteome Research | Proteomic analysis of Rhizobium favelukesii LPU83 in response to acid stress.（酸胁迫下根瘤菌LPU83（Rhizobium favelukesii）的蛋白质组学分析）(解读人：丑天胜）

    文献名:Proteomic analysis of Rhizobium favelukesii LPU83 in response to acid stress.(酸胁迫下根瘤菌LPU83(Rhizo ...

  3. Spring Boot入门系列（九）如何实现异步执行任务

    前面介绍了Spring Boot 如何整合定时任务,不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/1657780.htm ...

  4. mybatis3.2.7 原理和入门程序

    使用jdbc操作数据库有以下缺点   |--数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁开启和关闭,造成数据源资源浪费,影响数据库性能.    设想:使用数据库连接池管理数据库连接.   ...

  5. Linux & Shell 学习笔记【1/2】

    因为工作上的需要,花了些许时间去熟悉学习Linux和Shell,现在也花点事件在此记录一下以加强巩固学习的内容吧.学的不算深入,所以都是一些比较junior的内容. 在下一篇随笔会详述之前写的一个用于 ...

  6. Python中保留两位小数的几种方法

    https://blog.csdn.net/Jerry_1126/article/details/85009810 保留两位小数,并做四舍五入处理方法一: 使用字符串格式化>>> a ...

  7. effective-java学习笔记---使用枚举类型替代整型常量34

    1.要将数据与枚举常量相关联,请声明实例属性并编写一个构造方法,构造方法带有数据并将数据保存在属性中. // Enum type with data and behavior public enum ...

  8. 斯坦福经典AI课程CS 221官方笔记来了！机器学习模型、贝叶斯网络等重点速查...

    [导读]斯坦福大学的人工智能课程"CS 221"至今仍然是人工智能学习课程的经典之一.为了方便广大不能亲临现场听讲的同学,课程官方推出了课程笔记CheatSheet,涵盖4大类模型 ...

  9. ArcGIS Server的安装

    1.双击ArcGIS Server安装目录下的Setup.exe. 2.点击“Next”. 3.选择“I accept the license agreement”,点击“Next”. 4.点击“Ch ...

  10. linux 中的页缓存和文件 IO

    本文所述是针对 linux 引入了虚拟内存管理机制以后所涉及的知识点.linux 中页缓存的本质就是对于磁盘中的部分数据在内存中保留一定的副本,使得应用程序能够快速的读取到磁盘中相应的数据,并实现不同 ...