~~~
<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. PHP 7 中的一些小技巧，你知道的有哪些

    PHP 7 显著提高了整体性能.实际上主要的特性有 null 合并运算符或返回类型声明.如果你不知道它们,那么你应该去查看 PHP 文档. 这里有一些很少人知道的.可能有用的特性. 相同的命名空间,相 ...

  2. Jenkins下构建UI自动化之初体验

    一.缘 起 笔者之前一直在Windows环境下编写UI自动化测试脚本,近日在看<京东系统质量保障技术实战>一书中,萌生出在jenkins下构建UI自动化测试的想法 二.思 路 首先,在Li ...

  3. python高阶函数&异常处理

    高阶函数 1.什么是高阶函数 在Python中,变量可以指向函数 函数名也是变量 既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. ma ...

  4. 从零开始学习R语言（二）——数据结构之“因素（Factor）”

    本文首发于知乎专栏:https://zhuanlan.zhihu.com/p/60101041 也同步更新于我的个人博客:https://www.cnblogs.com/nickwu/p/125370 ...

  5. Spring Cloud 系列之 Netflix Hystrix 服务监控

    Actuator Hystrix 除了可以实现服务容错之外,还提供了近乎实时的监控功能,将服务执行结果和运行指标,请求数量成功数量等等这些状态通过 Actuator 进行收集,然后访问 /actuat ...

  6. C# datagridview 格式化单元格内容

    private void dgvBig_CellFormatting(object sender, DataGridViewCellFormattingEventArgs e) {  if (dgvB ...

  7. python使用argparse 、paramiko实现服务器管理器

    使用argparse,paramiko两个包去实现简易的服务器管理器,完成两种方式的连接( 密码和密钥 ),以及命令行交互,文件上传下载. 相比sys.argv的方式去判断传入的参数,如果参数较多那么 ...

  8. hdu2838 cow sorting用树状数组求逆序对

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2838/ 题目解法:题目给出一个1-n的排列,操作只有一种:交换相邻的元素,代价是两个元素之和,问将该序列变成升序 ...

  9. 洛谷 P5596 【XR-4】题 题解

    原题链接 本题只要 推式子 就可以了. \[y^2-x^2=ax + b \] \[a x + x^2 = y^2 - b \] \[4 x^2 + 4 ax = 4 y^2 - 4b \] \[(2 ...

  10. Partition Array into Disjoint Intervals

    2020-02-10 22:16:50 问题描述: 问题求解: 解法一:MultiSet O(nlog) 看了下数据规模,第一个想到的是multiset,肯定可以ac的,就直接敲了出来. public ...