~~~
<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. 前端构建工具gulpjs的使用介绍及技巧【转载】

    转载至:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常 ...

  2. C# RSACryptoServiceProvider 加密解密 RSA 加密解密

    什么是RSA:RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥 推导出 解密密钥在计算上是不可行的”密码体制. 下附代码,在控制台中粘贴在启动类即 ...

  3. Zetatier One 基本用法

    Zetatier One 基本用法 ZeroTier One是用加密的点对点技术将处于不同物理位置的网络建立私人的局域网,即使用软件实现路由和交换机功能,而且它能使用WEB控制台管理网络,是对SDN( ...

  4. 《Python学习手册 第五版》 -第17章 作用域

    上一章的是函数的基础,因为函数在运用过程中,是可以嵌套的,函数中是会涉及到变量的,为了明确各自变量的使用范围,系统是有一套规则或者原则的,这就是作用域的概念 本章重点内容 1.作用域:作用域的概念 2 ...

  5. Natas22 Writeup（header重定向、burp截取抓包）

    Natas22: 打开页面是一个空白页面,查看源码,看起来好像是需要我们在url中添加“revelio”参数即可,然而实验了之后发现浏览器跳转回了原来的页面. 再次仔细审计源码,会看到页面开头有一个重 ...

  6. Swift中的感叹号( ! )与问号( ? )之谜

    基本了解 在Swift代码会经常看到定义属性或方法参数时类型后面会紧跟一个感叹号( ! )或问号( ? ), 刚开始接触Swift的童鞋就可能不太明白之代表什么意思,一头雾水,开始凌乱了. 本文将带你 ...

  7. Swift 4.0 字符串(String)学习

    定义字符串常量(常量只有读操作) let lString = "constant" let lString1: String = "constant" 定义字符 ...

  8. 安装SQL Server 2008R2 报错“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本”解决方法

    安装SQL Server 2008 R2报错“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本,请在安装 SQL Server 2008 前将 VS2008 升级 ...

  9. 33. CentOS7 静态ip设置

    1.网络连接选择NAT模式: 2.关闭vmware的dhcp:选择编辑-->虚拟网络编辑器,选择VMnet8,去掉使用本地DHCP服务将ip地址分配给虚拟机(D). 3. 点击NAT设置(S)查 ...

  10. 强化学习之三点五：上下文赌博机（Contextual Bandits）

    本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...