vue 学习一
这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了,
一vue.js的使用:
可以在页面是直接使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<style> #app{
color: blueviolet;
}
.bg{
color: red;
}
</style> </head>
<body>
<div id="app"> <div class="bg2">
helloWorld
{{message}}
{{count +}}
</div>
<div> {{count}}
{{template}}
</div>
<div v-html="template"></div>
<div> <a v-bind:href="url">baidu</a>
</div> <a :href="url"></a>
<a href="http://www.baidu.com">baidu</a> <button type="button" v-on:click="submit()">加数字</button>
<button type="button" @click="submit()">加数字</button> </div> </body>
<script> new Vue({
el:"#app",
data:{
message:'hellowprld',
count:,
url:'http://www.baidu.com',
template:'<div> heoo</div>'
},
methods:{
submit:function(){
this.count++
}
} }) </script>
</html>
就可以在页面上直接使用了, 这种引入是不是很好调式的,
所以一般在开发环境中引入:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
vue.js,是一个双向数据绑定的前端框架,而且,如果代码简洁,是不直接操作dom的,,而是通过组件直接进行通讯;
new Vue({
el:"#app",
data:{
message:'hellowprld',
count:,
url:'http://www.baidu.com',
template:'<div> heoo</div>'
},
methods:{
submit:function(){
this.count++
}
}
})
通常会创建一个vue的实例,如上面脚本,代表,vue.js来管控上面页面来操作.,
通常不是这样来操作页面的,而是使用vue.js的npm来管理依赖库,webpack进行打包页面,通过路由来进行页面进行转发,同时每个页面都会拆分成几个组件来进行操作,
如上图就是分成4个组件来操作的,会存在组件之间的通讯,涉及子组件,父组件的之间的通讯.
vue 学习一的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记（二）——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习2：模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Solaris Tips: Repairing the Boot Archive (ZT)
http://www.seedsofgenius.net/solaris/solaris-tips-repairing-the-boot-archive 注意以下是系统盘非镜像情况下的操作,如果系统盘 ...
- DAY18-Django之form表单
构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的模板: <form action="/your-name/" method=" ...
- DAY5-常用模块
一 time与datetime模块 二.random模块 三.os模块 四.sys模块 五 shutil模块 六 json&pickle模块 七 shelve模块 八 xml模块 九 conf ...
- android wifi框架
---恢复内容开始--- frameworks/base/services/java/com/android/server/wifi 中的ReadMe文件 WifiService: Implement ...
- 错误信息："OraOLEDB.Oracle" 返回了消息 "ORA-12154: TNS: 无法解析指定的连接标识符
错误信息:"OraOLEDB.Oracle" 返回了消息 "ORA-12154: TNS: 无法解析指定的连接标识符 链接服务器"NC"的 OLE D ...
- day36-hibernate检索和优化 02-Hibernate检索方式：简单查询及别名查询
Hibernate: insert into Customer (cname) values (?)Hibernate: in ...
- springmvc 注解扫描失败的可能原因
情况是这样的:web工程采用了ssm框架,dao和service都是通过annotation方式注入的,工程运行正常.后来把service和dao打成jar放在工程的lib目录下,问题来了,配置没改动 ...
- Spring_01 spring容器、控制反转(IOC)、依赖注入(DI)
目录 1 什么是spring框架 2 spring框架的特点 3 spring容器 3.1 什么是spring容器 3.2 spring容器创建对象的编程步骤 3.4 spring容器创建对象的方式 ...
- linq 初步认识
linq to sql 类 介绍: linq如果不能用的话 重装一下vs就好了 LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言 ...
- 【转】nginx+memcached构建页面缓存应用
如需转载请注明出处: http://www.ttlsa.com/html/2418.html nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的 ...