vue.js 2.0 官方文档学习笔记 —

这是我的vue.js 2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。

!官方文档：https://cn.vuejs.org/v2/guide/

01. vue 介绍

<html>
<head><meta charset="utf-8"/><title>vue 介绍</title><!-- <script src="js/vue.min.js"></script> --><script src="https://unpkg.com/vue"></script>
</head>
<body><!-- 官方文档：https://cn.vuejs.org/v2/guide/ --><!-- 绑定 --><div id="app"><!-- ①声明式渲染 --><p>{{ info }}</p><p v-text="info"></p><p v-html="info"></p><p v-once>{{ info }}</p><p>{{ info }}</p><p>{{ info.concat("!!!") }}</p><p>{{ info ? "has info" : "no info" }}</p><!-- <p>{{ var info2 = "info2" }}</p> --><!-- <p>{{ if (info) {return "info2"} }}</p> --><!-- ②绑定元素特性 --><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span><!-- ③条件：控制切换一个元素是否显示 --><p v-if="seen">现在你看到我了</p><!-- ④循环：绑定数组的数据来渲染一个项目列表 --><ol><li v-for="todo in todos">{{ todo.text }}</li></ol><!-- ⑤处理用户输入 --><button v-on:click="reverseMessage">逆转消息</button></br><!-- ⑥表单输入和应用状态之间的双向绑定 --><input v-model="info"><!-- ⑦使用组件 --><ol><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol><!-- ①②③④⑤⑥⑦⑧⑨⑩ --></div><!-- 数据 --><script>var data = {info : "Hello world", // ①⑥message: '页面加载于 ' + new Date().toLocaleString(), // ②seen: true, // ③todos: [ // ④{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }],groceryList: [ // ⑦{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]}// 注册组件（全局）// ⑦Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})// 创建根实例var vm = new Vue({el: '#app',data: data,methods: {reverseMessage: function () { // ⑤this.message = this.message.split('').reverse().join('')}}})</script></body>
</html>

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍相关推荐

ZooKeeper官方文档学习笔记01－zookeeper概述
纠结了很久,我决定用官方文档学习 ZooKeeper概述学习文档学习计划 ZooKeeper:分布式应用程序的分布式协调服务设计目标数据模型和分层名称空间节点和短命节点有条件的更新和监视 ...
Open3D官方文档学习笔记
Open3D官方文档学习笔记第一部分--点云 1 可视化点云 2 体素降采样 3 顶点法线评估 4 访问顶点法线补充:Numpy在Open3D中的应用 5 裁剪点云补充1:获取点云坐标补充2: ...
ZooKeeper官方文档学习笔记03－程序员指南03
我的每一篇这种正经文章,都是我努力克制玩心的成果,我可太难了,和自己做斗争. ZooKeeper官方文档学习笔记04-程序员指南03 绑定 Java绑定客户端配置参数 C绑定陷阱: 常见问题及故障 ...
Android 开发之ViewPage官方文档学习笔记
2019独角兽企业重金招聘Python工程师标准>>> 以下为官网的官方文档,我将从翻译该文档开始学习. ViewPager extends ViewGroup java.lang. ...
OpenCV-Python官方文档学习笔记（上）
整理自OpenCV-Python官方文档一. OpenCV-Python Tutorials 1 安装及验证 2 图片读写,展示 3 视频读写,展示 4 绘图功能(绘制几何形状:线.圆.椭圆.矩形. ...
kafka官方文档学习笔记2--QuickStart
下载kafka https://www.apache.org/dyn/closer.cgi?path=/kafka/1.0.0/kafka_2.11-1.0.0.tgz 解压安装包 > tar ...
xarray官方文档学习笔记（序章）
个人需要开了这个坑不定时更新希望能和大家共同学习和交流工作中难免有不足和错误,希望大家多多批评指正 xarray官方文档首页:http://xarray.pydata.org/en/stable ...
kafka官方文档学习笔记3--配置简述
Kafka使用key-value键值对格式的配置,这些配置即可以在进程启动时,根据指定的properties文件加载,也可以通过编程的方式,在程序中动态指定:根据集群中角色的不同分为6种配置: bro ...
Django企业开发读书笔记（及官方文档学习笔记）老男孩2019Go语言视频学习
目标:深入理解Django以及web开发深入知识,掌握Gin ,Go micro 框架 ,Kafka ,Zookeeper 为kubernetes Istio 做微服务,服务网格做铺垫实现Pytho ...

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

01. vue 介绍

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍相关推荐

最新文章

热门文章