这个是很早之前公司要使用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 学习一的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  10. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. rsync 同步mac机器目录数据到windows2008R2

    openssh rsync -azvP --progress -e "ssh -p 6099" /ahwater/rsync/ ahwater@ip:/ahwater

  2. nested exception is java.net.UnknownHostException: mybatis.org异常处理

    最近自己写了个小项目(丛林商城V1.0),一个简单的网上商铺:主界面是商品的展示和登录,面对三种角色的人群:一般客户,VIP客户,管理员,与之对应的三种商品价格,登陆后根据具体角色来显示商品的价格:还 ...

  3. 第四天：servlet的生命周期和一些细节问题

    1.  servlet的生命周期: a)  流程 i.  Web服务器首先会检查是否装载了该servlet的实例对象.如果装载了直接进行第四步. ii.  装载并创建该servlet的实例对象. ii ...

  4. 无法解决 equal to 操作中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_BIN" 之间的排序规则冲

    在两个数据库之间进行复合查询时有时会出现如下错误: 无法解决 equal to 操作中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_BIN&qu ...

  5. 关于service和线程的区别

    主要有两方面,访问控制和功能区别 首先,service是运行在主线程上的,并不是一个新的线程 其次,service在运行的时候可以被多个activity访问和控制,而线程是不可以的 最后,servic ...

  6. day17 11.JdbcUtils工具抽取

    连接数据库的四个必要条件:driverclass.url.username.password. package cn.itcast.utils; import java.sql.Connection; ...

  7. Cocos2d-js 热更新学习笔记

    转载至: http://blog.csdn.net/pt_xxj/article/details/68927705 为什么还要再写一篇关于cocos2d js热更新的笔记,最单纯的想法就是记录心得,另 ...

  8. DB2--值为null则赋默认值

    数据库sql操作经常会做一些null值的处理.如果一个字段的值为null,我们希望查询出的结果默认设为0或空,则使用函数 COALESCE(column,0)  ,0的位置可以替换为其他值,可以是'' ...

  9. VS2013中，将Qt的GUI程序改为控制台程序

    在Visual studio 中创建QT GUI程序是不带Console的,但是调试时候常常需要查看打印信息,可以通过如下设置显示控制台 方法一.在vs中直接创建控制台程序方法二.当你通过设置你的应用 ...

  10. PCL—关键点检测（Harris）低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5064848.html 除去NARF这种和特征检测联系比较紧密的方法外,一般来说特征检测都会对曲率变化比较剧烈的点更 ...