这个是很早之前公司要使用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. Bytes和bits的区别（字节和位的区别）

    基本概念 Bit意为“位”或“比特”,是计算机运算的基础,属于二进制的范畴: Byte意为“字节”,是计算机文件大小的基本计算单位: 这两者应用的场合不同.通常用bit来作数据传输的单位,因为物理层, ...

  2. 关于TortoiseGit设置代理服务器会自动取消的问题解决方法

    在前些日子,我使用TortoiseGit的并给其设置代理服务器的时候,每次设置好之后,关闭打开总是会自动取消勾选,通过不断的尝试和分析之后,得出了解决方案. 首先,这个配置项是保存在HOME环境变量对 ...

  3. 关于mybatis和spring复合pom的异常

    java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()L ...

  4. ubuntu apt指令分析

    ubunut安装软件时候需要查看源内可供选择的安装包的一些信息,此处提供一些指令方便以后查阅 apt-get sudo apt-get update #更新源 sudo apt-get upgrade ...

  5. Android 菜单 之 上下文菜单ContextMenu

    所谓上下文菜单就是当我们长按某一个文件时弹出的菜单 操作这个菜单我们要重写onCreateContextMenu()方法 如上一篇文章一样,对于这个菜单中选型的操作也有动态添加和xml文件添加两种方法 ...

  6. 一道java笔试题目:Vector和ArrayList的区别

    Vector和ArrayList的区别 线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构这些类均在java.util包中本文试图通过 ...

  7. 安装Maven及Eclipse中配置Maven

    下载maven版本: 1.进入官网:http://maven.apache.org/download.cgi   ,下载编译后的maven版本:如图下: 2.创建一个目录,把下载的maven压缩包,进 ...

  8. DingTalk代码库机器人尝试

    今日室友询问相关机器人的事情,本来对于机器人还是有一些了解的,至少是明白一些简单的原理,包括微信公众号,qq群的只能机器人,以及钉钉的机器人. 首先是说那个关于微信公众号的那个自动回复便可以使用一些机 ...

  9. java代理模式实例讲解

    下面这个是设计模式课上的例子: import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import ...

  10. 【C#】 创建、部署和调用WebService的简单示例

    C# 创建.部署和调用WebService的简单示例 <div class="postBody"> <div id="cnblogs_post_body ...