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只聚焦于视图层,可以很容 ...
随机推荐
- ownCloud-9.1.1 (Ubuntu 16.04)
平台: Ubuntu 类型: 虚拟机镜像 软件包: owncloud-9.1.1 commercial content management open-source owncloud storage ...
- JDBC中重要的类/接口-Connection、DriverManager、ResultSet、Statement及常用方法
DriverManager(管理一组 JDBC 驱动程序的基本服务) 它的方法: getConnection(String url, String user, String password) 试图建 ...
- 12/13 exercise
gcc -[cog] gcc pro1.o pro2.o //create a executable file x.out if unnamed
- MySQL锁小结
锁的作用:避免并发请求时对同一个数据对象同时修改,导致数据不一致. 怎么加锁: 1.事务T1在对某个数据对象R1操作之前,先向系统发出请求,对其加锁L1. 2.之后,事务T1对该数据对象R1有了相 ...
- Codeforces 760A Petr and a calendar
题目链接:http://codeforces.com/problemset/problem/760/A 题意:日历需要多少列. #include <bits/stdc++.h> using ...
- 2017.11.22 mysql数据库实现关联表更新sql语句
比如有两张表,其中一张表某个字段的值要关联另一张表进行统计,就要用到mysql的update方法,并且left join另一张表进行联合查询. mysql关联表更新统计 sql语句如下: 代码如下 复 ...
- python title() upper() lower() 以首字母大写的方式显示每个单词/将字符串改为全部大写或全部小写
以首字母大写的方式显示每个单词 [root@chenbj python]# cat name.py #!/usr/bin/env python # _*_ coding:utf-8 _*_ name ...
- FastRCNN 训练自己数据集 (1编译配置)
http://www.cnblogs.com/louyihang-loves-baiyan/p/4885659.html 按照博客的教程配置,但自己在服务器上配置时,USE_CUDNN = 1会报错, ...
- c#方法(整理自菜鸟网)
定义一个方法,根本上说就是在声明它的结构的元素 定义方法的语法如下: <访问修饰符(public啥的)> < 返回值数据类型,没有返回值的为void > <方法名称&g ...
- 前端JavaScript之DOM事件操作
DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...