这个是很早之前公司要使用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. hibernate 单元测试

     单元测试 测试 dao service action package com.kaishengit.test; import org.hibernate.Session; import com.ka ...

  2. LNMP 1.6 常见的502问题解决

    在nginx上跑discuz,先修改配置文件 cd /usr/local/nginx/conf/vhosts/ vim test.conf server { listen ; server_name ...

  3. struts-hibernate整合（1）配置环境

    ①加载jar包 创建类库: 在myeclipse中点击windows---Preference---Java---Build Path---User Libraries---new 输入创建类库名字s ...

  4. JAVA中的垃圾回收机制以及其在android开发中的作用

    http://blog.csdn.net/xieqibao/article/details/6707519 这篇文章概述了JAVA中运行时数据的结构,以及垃圾回收机制的作用.在后半部分,描述了如何检测 ...

  5. Swing简介

    ---------------siwuxie095                         Swing 简介:     Java Swing 是 Java Foundation Classes ...

  6. Ros学习——值得学习的package

    RViz是一款强大的可视化工具,它允许你查看机器人中的传感器和内部状态. TF程序包(package)提供在机器人所使用到的各种坐标系之间的变换功能,并保持跟踪这些变换的变化. actionlib - ...

  7. 使用批处理替换windows系统中的hosts文件

    chcp 936 >nul@echo offmode con lines=30 cols=60%1 mshta vbscript:CreateObject("Shell.Applica ...

  8. 100211D Police Cities

    传送门 分析 看到这个题我们的第一反应自然是Tarjan缩点,在这之后我们可以发现实际只要在缩点之后所有出度或入度为0的点布置警察局就可以达到要求,我们用dpij表示考虑前i个出度或入度为0的点共布置 ...

  9. string为什么是final？源码分析

    http://blog.csdn.net/zhangjg_blog/article/details/18319521

  10. Sequoiadb该如何选择合适的SQL引擎

    Sequoiadb作为一个文档型NoSQL数据既可以存储结构化数据也可以存储非结构化数据,对于非结构化数据只能使用原生的API进行查询,对结构化数据我们可以选择使用原生的API和开源SQL引擎,目前P ...