4 Vue.js 核心理念:数据驱动界面
1



- style样式放在body里面




<style type="text/css">
.ui.segment.container {
width:700px;
} p {
font-family: 'Raleway', sans-serif;
font-size:{{ article.fontSize }}px;
} body {
background:url(images/star_banner.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed
} </style>
<div class="ui segment padded container" >
<button v-on:click="article.fontSize+=5" class="ui top left attached label" type="button" name="button">+</button>
<h1 class="ui header" style="font-family:'Oswald', sans-serif;font-size:40px">
{{ article.title }}
{{ article.fontSize }}
</h1>
<p>
{{ article.content }}
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
//context
data:{
//context["articlke"] = article
article:{
title:"THis is a title",
content:"Hi there",
fontSize:18,
},
comments:[
{name:"alex",said:"Great!"},
{name:"alex",said:"Great!"},
{name:"alex",said:"Great!"},
{name:"alex",said:"Great!"},
]
}
})
</script>
2









3









<!-- Comments&Form's here -->
<div class="ui segment container" style="width:700px;">
<h3 class="ui header" style="font-family:'Oswald', sans-serif;">Comments</h3>
<div v-for="comment in comments" class="ui comments">
<div class="comment" v-if="comment.show">
<div class="avatar">
<img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />
</div>
<div class="content">
<a href="#" class="author">{{ comment.name}}</a>
<div class="metadata">
<div class="date">2 days ago</div>
</div>
<p class="text" style="font-family: 'Raleway', sans-serif;">
{{ comment.said }}
</p>
<div class="actions">
<a v-on:click="comment.show = !comment.show">屏蔽</a>
</div>
</div> </div> <div class="comment" v-else>
已经被屏蔽
</div> </div> <div class="ui divider"></div> <h3 class="ui header"> 你还可以输入{{ 200 - message.length }}字</h3>
<form class="ui form" action="" method="post">
<input v-model="message" type="text" >
</form> </div>
4
5
6
4 Vue.js 核心理念:数据驱动界面的更多相关文章
- vue.js核心最基本的功能
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: , text: , text: , text: '随便其它什么人吃的东西' } ] }}) 蔬菜 奶酪 随便其 ...
- Vue学习系列(一)——初识Vue.js核心
前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...
- Vue.js核心概念
# 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效 ...
- vue.js是什么?它的优点有哪些?
Vue.js 是一套响应式的 JavaScript 开发库.其他前端开发库也有很多,比如 jQuery.ExtJS.Angular 等. Vue.js 自问世以来所受关注度不断提高,在现在的市场上,V ...
- Vue.JS 对比其他框架
Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...
- Vue.js库的第一天的学习
一,vue.js简介 Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择 所以说, vue.js是一套构建用户界面的渐进式框架 Vue.js的核心 ...
- 【Vue】转-Vue.js经典开源项目汇总
版权声明:本文为EnweiTech原创文章,未经博主允许不得转载. https://blog.csdn.net/English0523/article/details/88694219 Vue是什么? ...
- vue.js初识(一)
vue.js安装 官网:http://cn.vuejs.org/ 官方安装介绍:http://cn.vuejs.org/v2/guide/installation.html MVVM框架:View.V ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
随机推荐
- Python用户交互与流程控制
1. 用户交互 python3通过input实现用户交互,与python2的raw_input一样,接收的值都转换成字符串格式.python2中也有一个input,而python2中的input接收的 ...
- python绘图 matplotlib教程
mark一个很好的python绘图教程 https://liam0205.me/2014/09/11/matplotlib-tutorial-zh-cn/
- Raknet—视频会议系统最佳的数据传输引擎
RakNet是一个跨平台的C++和C#的游戏引擎,它主要是为高效的数据传输而设计,使用者可以通过它进行游戏和其他的程序的开发.RakNet虽然是一个游戏引擎,但同样也是一个非常好的视频会议系统传输引擎 ...
- IOS 解析XML数据
● 什么是XML ● 全称是Extensible Markup Language,译作“可扩展标记语言” ● 跟JSON一样,也是常用的一种用于交互的数据格式 ● 一般也叫XML文档(XML ...
- select_related()函数
Django获取数据实体的时候,返回的对象一个实体或多个实体,也就是QuerySet,它是Django专有的东西,具体的理解,它是类似Python的字典的东西,但它并不实现字典的所有方法.今天讲解的是 ...
- BestCoder Round #91 1001 Lotus and Characters
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6011 题意: Lotus有nn种字母,给出每种字母的价值以及每种字母的个数限制,她想构造一个任意长度的 ...
- TeamCity实战(2):NuGet服务器
如果有在内网架设NuGet服务器的需要,比如说公司要求所有开发人员的开发机与外网隔离,但是项目开发又必须要通过NuGet获取开发包的情况. 打开选项其实很简单,但是打开之后怎么样更新开发包要复杂些了. ...
- 字符串比较操作类StringComparer
StringComparer这个字符串比较操作类.它继承了四种接口IComparer, IEqualityComparer, IComparer<string>, IEqualityCom ...
- Siamese Network
摘抄自caffe github的issue697 Siamese nets are supervised models for metric learning [1]. [1] S. Chopra, ...
- vue 城市列表与字母表联动
实现两个联动 一是点击右侧字母的时候,城市列表出现相应首字母下的城市 二是鼠标在字母表上滑动的时候,城市列表实时跟着变化 一.点击字母出现相应的列表,给每个字母设置handleLetterClick事 ...