这个是很早之前公司要使用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. 2015.4.21 SetWindowPos函数用法

    定义:[DllImport("user32.dll")] public static extern bool SetWindowPos(IntPtr hWnd, int hWndl ...

  2. 2015.3.12 C#运用正则表达式点滴

    Regex reg = new Regex(@"\w{1,}@\w{1,}\.(com)?(net)?"); //匹配(1个或多个)(字母或数字或下滑线)@ (1个或多个)(字母或 ...

  3. windows服务编写和“以管理员运行”程序的方法

    本文将首先解释如何 创建 一个定期查询可用物理内存并将结果写入某个文本文件的服务.然后指导你完成生成,安装和实现服务的整个过程. 第一步:主函数和全局定义 首先,包含所需的头文件.例子要调用 Win3 ...

  4. 第五章 JVM调优（待续）

    Java虚拟机内存模型 JVM内存分配参数 垃圾收集基础 常用调优案列和方法 实用JVM参数 实战JVM调优

  5. jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...

  6. SQL 实现行列互换

    Oracle:不过大多数是采用 oracle 数据库当中的一些便捷函数进行处理,比如 ”pivot”: MySql:目前没有找到更好的方法 题目:数据库中有一张如下所示的表,表名为sales. 年 季 ...

  7. 导入android studio项目，编译失败

    使用android studio 打开studio 工程,编译的时候报错: “ INFO - .project.GradleProjectResolver - Gradle project resol ...

  8. 【274】Python 相关问题

    一.中文编码   参考:Python 中文编码 Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字,所以在读取中文时会报错. 解决方法为只要在文件开头加入如下代码,任 ...

  9. c语言中argc和argv

    main函数的参数,解释如下: argc:命令行总的参数的个数,即argv中元素的格式. *argv[ ]:字符串数组,用来存放指向你的字符串参数的指针数组,每一个元素指向一个参数. argv[0]: ...

  10. 关于service和线程的区别

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