Vue基础1

作者: Taoyongpan | 来源:发表于2018-05-23 21:13 被阅读0次

Vue简介

  百度百科:Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
  Vue.js是一个js的MVVM的库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。并且作者是华人的关系,Vue拥有着对华人开发者最友好的api文档和官方教程。

Vue使用

  我也是刚接触Vue框架,写下了第一个demo,给我的感觉很像Kissy的使用感觉,使用的时候直接引入CDN就可以了,就像我们写其他demo的时候,直接先来个三件套,html,css,js三个文件,然后直接写js,在html页面引入即可,首先先来一个入门化的小demo;
html页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <!-- 引入CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    
</head>
<body>
    <div id="top">
        {{ name }}
    </div>
    <script src = "test.js"></script>
</body>
</html>

js代码:

new Vue({
    el:'#top',
    data:{
        name:'Tao'
    }
})

el就是来绑定div块的;
data里面可以给一些变量赋值,在html页面直接两个中括号{{}}里面引入变量即可显示;

很简单的小demo,会接着学习,每日更新;

相关文章

  • vue基础和指令(v-for)

    1. vue基础:

  • Vue学习总结(2019.7.31-8.4)

    Vue学习总结 目录 vue基础知识(1-13)vue 引入,实例化vue 数据 & 方法vue 绑定(:)vue...

  • bunny笔记|vue框架和库的区别

    学习vue前的基础 基础理解1.HTML2.CSS3.JavaScript4.ES6升级理解1.vue-route...

  • Python 高端课程培训,CMDB自动化运维培训!

    1、入门小基础(8个课时): 1、沙盒环境,py环境安装使用 2、vue 基础语法与组件学习 3、vue + el...

  • VUE基础知识入门

    VUE基础知识入门 VUE官方文档教程链接:VUE 1.什么是Vue.js Vue.js(读音 /vjuː/, 类...

  • Vue基础1

    Vue简介   百度百科:Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面...

  • Vue 基础(1)

    学习测试环境可通过CDN地址引入Vue(项目开发和线上环境一般使用vue-cli、webpack打包) 可使用构造...

  • vue基础1

    Vue总结# 渐进式js框架 组成 模板 指令:将控制和·html联系在一起html内容 样式 控制 data:数...

  • vue2.0+router路由

    1、搭建vue脚手架2、通过vue脚手架,我们搭建好了基础的vue,接下来就开始使用vue-cli来构建基础路由项...

  • Vue中extend基本用法

    1.Vue.extend(options) 参数:{Object} options 用法:使用基础Vue构造器,创...

网友评论

    本文标题:Vue基础1

    本文链接:https://www.haomeiwen.com/subject/ikedjftx.html