码迷,mamicode.com
首页 > 其他好文 > 详细

关于Vue的学习

时间:2020-01-12 22:02:59      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:name   属性   大型框架   注册   选中   直接下载   data   影响   javascrip   

简介

什么是vue

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

怎么引用vue

  • 直接用<script> 引入

    直接下载并用<script>标签引入,Vue 会被注册为一个全局变量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
      {{ message }} {{name}}
    </div>
    
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            name : "Vue"
        }
    });
    </script>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 命令行工具 (CLI)
    后续交代怎么使用命令行工具

    再一次vue是什么

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统

他分为两个重要的部分

  • 视图
<div id="app">
      {{ message }} {{name}} //文本插值
    </div>
  • 脚本
var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            name : "Vue"
        }
    });
  • el: ‘#app‘,作为元素,

app选中了前文的<div id="app"> </div>

  • data:{ } 作为数据

每一个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:

var vm = new Vue({
    //选项
})

vm其实就是Vue的一个对象

数据与方法

当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

关于Vue的学习

标签:name   属性   大型框架   注册   选中   直接下载   data   影响   javascrip   

原文地址:https://www.cnblogs.com/samanian/p/12184624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!