1 Star 1 Fork 0

小石同学/VUE的学习

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

VUE的入门

一、了解VUE

1.作者

尤雨溪,前端框架Vue.js的作者,HTML5版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目,最后自己也走上了开源之路,现全职开发和维护Vue.js。

2.Vue是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架

3.Vue的四种安装方式

  1. 在页面上以 CDN 包的形式导入。
  2. 下载 JavaScript 文件并自行托管
  3. 使用 npm 安装它。
  4. 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。

二、简单使用VUE

1.js常用的三种变量

/* 
var 经常使用 没有值就输出undefined
let 块级变量方法内不受影响
const 必须给一个初始化的值 
*/
var a = 0;
var b = true;

function add(){
    let a = 3.1415926
    if(true){
        let a = 10;
        console.log("let 方法内",a);
    }
    console.log("let 方法外",a);
}
function add1(){
    var a1 = 3.1415926
    if(true){
        var a1 = 10;
        console.log("var 方法内",a1);
    }
    console.log("var 方法外",a1);
}
add();
add1();

const data = {
	name:'123',
	age:a,
	chage:b
}

2.双向数据绑定以及MVVM

914a6ba6b7444967a05f8a357f841020

MVVM(Model View ViewModel)

Model 模型 数据模型

View 试图 页面视图

ViewModel VUE VUE的作用就是把数据模型和页面视图进行关联

VUE的设计核心提供了两个模块

  1. ​ DOM Listeners DOM监听器
  2. ​ Data Bindings 数据绑定器

数据绑定

  1. :value 单项数据绑定 (DOM Listeners 是断路)
  2. v-model 双向数据绑定

注意:

在vue中只要Model发生改变,页面中所有使用到Model的地方会同时发生改变。

3.插值语法的其他用法

<div id="box">
    <!-- 通过vm的对应get方法获取值  数据代理 -->
    {{ msg }}
    <h1>插值语法的其他用法</h1>
    <!-- 算数运算 -->
    <h2>{{ 1+1 }}</h2>
    <!-- 判断 -->
    <h2>{{ 1==1 }}</h2>
    <!-- 插值语法本身就代表vm -->
    <h2>{{ $options.el }}</h2>
</div>

空文件

简介

这是一个用于 学习VUE的仓库 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/yuanmatansuo/vue-learning.git
git@gitee.com:yuanmatansuo/vue-learning.git
yuanmatansuo
vue-learning
VUE的学习
master

搜索帮助