这个是很早之前公司要使用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. Rozor视图（c#代码与html混合编程原则）

    (1)大括号的匹配原则(就近原则){} (2)html标签有截断c#代码的功能 @*服务器端的注释*@    <!--客户端注释-->

  2. C#实现有向无环图(DAG)拓扑排序

    对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序列中出现在 ...

  3. 1.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：

    转自:https://www.cnblogs.com/ssslinppp/p/4528892.html [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://w ...

  4. Android开发国际化

    安卓中,国际化十分简单. 其实就是文件夹的问题.一般我们分两种情况. 一是app根据系统语言调用对应的资源文件夹,二是在app里面根据用户的需求来更改语言.前者比较简单,只需求创建对应国家的strin ...

  5. java在Win7 64位 获取客户端的IP,MAC,计算机名

    package com.javaweb.util; import java.io.IOException; import java.io.InputStreamReader; import java. ...

  6. SpringBoot07 异常枚举、自定义异常、统一的全局异常处理

    1 异常编号和提示信息统一管理 利用枚举来实现异常的统一管理 package cn.xiangxu.springboottest.enums; import lombok.Getter; /** * ...

  7. IFC文档结构说明

    工业基础类为代表的建筑信息BIM数据交换和共享在一个建筑或设施管理项目各参与者之间的开放规范的建模.IFC是国际openbim标准.本文件包含的IFC标准的规范.该规范包括的数据架构,表示为一个表达模 ...

  8. ROS Learning-027 （提高篇-005 A Mobile Base-03） 控制移动平台 --- Twist 消息

    ROS 提高篇 之 A Mobile Base-03 - 控制移动平台 - Twist 消息 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 14 ...

  9. Batch Normalization 与Dropout 的冲突

    BN或Dropout单独使用能加速训练速度并且避免过拟合 但是倘若一起使用,会产生负面效果. BN在某些情况下会削弱Dropout的效果 对此,BN与Dropout最好不要一起用,若一定要一起用,有2 ...

  10. kaggle Titanic

    # coding: utf-8 # In[19]: # 0.78468 # In[20]: import numpy as np import pandas as pd import warnings ...