Vue 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue!‘
  }
})

Hello Vue!

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

除了文本插值,我们还可以像这样来绑定元素 attribute:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
var app2 = new Vue({
  el: ‘#app-2‘,
  data: {
    message: ‘页面加载于 ‘ + new Date().toLocaleString()
  }
})

鼠标悬停几秒钟查看此处动态绑定的提示信息!

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

如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = ‘新消息‘,就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

原文地址:https://www.cnblogs.com/xiewangfei123/p/12275644.html

时间: 2024-10-16 15:48:11

Vue 声明式渲染的相关文章

Vue声明式和编程式导航

声明式: <router-link :to='{path:"/detail",query:{obj:value}}'></router-link> 编程式: this.$router.push({path:'/detail',query:{obj:value}}); detail.vue取值 this.$route.query.obj

[vue]声明式导航和编程式导航

声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中,通过this.$router.push(xxx)来触发路径 $route&&$router 共同点: 都是属于vue-roouter 区别: $route: 获取路径中的参数,还可以通过watch观测路径的变化 $router: 编程式导 https://www.cnblogs.com/zhu

vue_声明式渲染

在hello-vue目录新建一个HTML 在hello.html中,我们编写一段简单的代码: h2中要输出一句话:xx 非常帅.前面的xx是要渲染的数据. 然后我们通过Vue进行渲染: <body> <div id="app"> <h2>{{name}},非常帅!!!</h2> </div> </body> <script src="node_modules/vue/dist/vue.js"

Vue之vue.js声明式渲染

Html: <div id="app"> {{ message }} </div> Vue: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 本例子由HTML模板(View)+Vue实例(ViewModel)组成. 创建Vue的实例,需传入一个选项对象,如: 数据(data):Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响

声明式导航和编程式导航

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Struts运行流程分析与声明式验证

strust2运行流程分析 1.发送一个HttpServletRequest给StrutsPrepareAndExecuteFilter 2.StrutsPrepareAndExecuteFilter询问ActionMapper:该请求是否是一个Struts2请求(即是否返回一个非空的ActionMapping对象) 3.若ActionMapper认为该请求是一个Struts2请求,则StrutsPrepareAndExecuteFilter把请求的处理交给ActionProxy 4.Actio

1.4.1.3 声明式函数动画

函数式编程能够以声明式风格编写库来解决存在的问题,我们已经看到用 LINQ 处理数据,用WPF 处理用户界面:但在函数式编程中,通常是创建库来解决自己的问域. 我们前面提到过,声明式风格可以不考虑实现的细节,遗漏了一些东西.函数式编程没有任何神秘的力量,能为我们实现困难的部分.设计我们自己的库时,需要实现所有的技术细节:只是实现的细节隐藏在库中(就像 LINQ 隐藏了所有的复杂性一样),这样,我们就能一劳永逸地解决普遍存在的问题. 在第十五章,我们将开发一个动画库,清单 1.6 以声明方式使用这

通过 React Hooks 声明式地使用 setInterval

本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他的推文里面说到: 不少朋友跟我提起,setInterval 和 hooks 一起用的时候,有种蛋蛋的忧伤. 老实说,这些朋友也不是胡扯.刚开始接触 Hooks 的时候,确实还挺让人疑惑的. 但我认为谈不上 Hooks 的毛病,而是 React 编程模型和 setInterval 之间的一种模式差异.

spring事物管理--声明式(AspectJ)(推荐使用)

1.表结构及数据 2.需引入的jar包: 3.业务层(Service).持久层(Dao)接口与实现类 Service接口: //转账案例业务层接口 public interface AccountService { /** * @param out :转出账号 * @param in :转入账号 * @param money :转账金额 */ public void transfer(String out,String in,Double money); } Service实现类: //转账案例