~~~
<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. 分布式——吞吐量巨强、Hbase的承载者 LSMT

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式系统的第九篇文章. 今天给大家分享的内容是LSM树,它的英文是Log-structed Merge-tree.看着有些发怵,但其 ...

  2. JVM 参数及各部分含义(转)

    转自:https://www.jianshu.com/p/1c6b5c2e95f9 JVM参数分类 JVM参数分为标准参数和非标准参数: 标准参数: "-"开头的参数,如-clie ...

  3. 读书笔记——商广明《Nmap渗透测试指南》

    一 Nmap基础学习 1.简介及安装 Nmap是一款由C语言编写的.开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Ne ...

  4. Spring 全局异常拦截根据业务返回不同格式数据 自定义异常

    1.全局异常拦截:针对所有异常进行拦截 可根据请求自定义返回格式 2.自定义异常类 处理不同业务的异常 接下来开始入手代码: 1).自定义异常类 @ControllerAdvice//添加注解 记得开 ...

  5. 物联网时代-新基建-ThingsBoard调试环境搭建

    前言 2020开年之际,科比不幸离世.疫情当道.经济受到了严重的损失.人们都不幸的感慨: 2020年真是太不真实的一年,可以重新来过就好了!国家和政府出台了拯救经济和加速建设的利好消息.3月份最热的词 ...

  6. ubuntu 16.04安装mysql server入门

    1.安装mysql-server -> sudo apt-get install mysql-server 输入root密码即可 2.修改服务器配置 默认mysql-server只对本机访问,新 ...

  7. [BFS]Codeforces Igor In the Museum

     Igor In the Museum time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. 使用 xposed 突破饿了么 ssl pining

    作为一个对各种黑科技充满好奇心的前端工程师,这一次盯上了现在的外卖大佬-饿了么.这篇文章记录了抓包饿了么过程中碰到的问题,以及解决方案,希望能够大家带来一点收获. 工具 夜神模拟器 + charles ...

  9. 运行docker大致流程

    平时部署测试环境使用jenkins将代码打包成docker镜像部署在rancher中,闲下来研究了一下docker的大致流程,自己画了一个流程图

  10. 【笔记3-31】Python语言基础-列表list

    列表list my_list = [1, 2, 3, 4, 5] 索引index my_list[0] 获取列表长度 len(my_list) 切片 [起始:结束:步长] my_list[1:3:2] ...