vue 基础核心学习
<html> <body> <div id="app">
{{ message }}
</div> <div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div> <div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div> <div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div> <div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> <!-- 声明式渲染-->
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}) var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
}) <!--条件与循环 -->
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
}) var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
app4.todos.push({ text: '新项目' }) <!-- 处理用户输入-->
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
<!-- 组件化应用构建--->
<!-- todo-item 就是组件名称-->
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> </body> </html>
vue 基础核心学习的更多相关文章
- Vue 基础指令学习
学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...
- Vue基础知识学习（后端）
### Vue学习(后端) Vue安装 -引入文件安装,直接在官网下载vue.js引入项目中 -直接引用CDN -NPM安装(构建大型应用使用,在这不用) -命令行工具(构建大型单页应用,在这不用) ...
- Vue基础知识学习笔记
一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...
- vue基础指令学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue - vue基础/vue核心内容
终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...
- vue - vue基础/vue核心内容（终结篇）
今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- Vue学习系列(一)——初识Vue.js核心
前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...
随机推荐
- RabbitMQ消息队基本概念
RabbitMQ简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组件之间的 ...
- JS 自动计算HTML的font-size
Rem尺寸解决方案,需要配合一些js动态设置<html>标签的font-size 和 viewport来配合 <script> (function(doc, win) { va ...
- Virtex6 PCIe 超简版基础概念学习（一）
文档版本 开发工具 测试平台 工程名字 日期 作者 备注 V1.0 ise14.7 DBF板 Day2/PCIETest1 2016.03.31 lutianfei none 参考资料: Sparta ...
- C++语言基础(19)-模板的显式具体化
应用背景: 例如有下面的函数模板,它用来获取两个变量中较大的一个: template<class T> const T& Max(const T& a, const T&a ...
- JavaScript之RegExp对象
ECMAScript 通过 RegExp 类型来支持正则表达式.使用下面类似 Perl 的语法,就可以创建一个正则表达式 var expression = / pattern / flags ; 其中 ...
- (Nhibernate )XML配置文件的智能感知(IntelliSense)功能
XML配置文件的智能感知(IntelliSense)功能 在使用一些第三方的程序库(Nhibernate,Ibatis...)常常需要手工编写比较复杂的配置文件,如果没有像VS IDE那样的Int ...
- iOS开发常见错误(转)
//大全 //读取数据库数据 -(void)movethesqlitefile{ NSString *sourcepath=[[NSBundle mainBundle]pathForResource: ...
- Problem H. The Fence 通过取余判重，求得某个区间的某些个数为某个数的倍数。
/** 题目:Problem H. The Fence 链接:https://vjudge.net/problem/Gym-101090H 题意:给定一个字符串,只有0或者1: 问:假如两个不同的1之 ...
- VMware-vSphere-5.1--------群集、HA、DRS、FT
VMware vSphere 5.1 高可用性 在本节中主要讲的是集群的一些功能和配置,相比5.0的设置,没有太大的变化.VMware vSphere为虚拟机提供虚拟化的基础架构,将现有的 ...
- Prelogin error: host 127.0.0.1 port 1434 Error reading prelogin response: Connection reset ClientConnectionId:26d4b559-c985-4b2e-bd8e-dd7a53b67e48
我在使用SSM框架的时候,连接的是sqlserver 2008r2数据库,但是查询数据的时候总是出现这样的警告信息,导致的结果是第一次登录的时候获取数据慢或者获取数据失败,具体的log信息如下 警告: ...