1 Star 1 Fork 0

小石同学/VUE的学习

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

发行版

暂无发行版

贡献者 (1)

全部

近期动态

3年前推送了新的提交到 master 分支,6b3f267...0cb1b19
3年前推送了新的提交到 master 分支,3b9939c...6b3f267
3年前推送了新的提交到 master 分支,3646981...3b9939c
3年前推送了新的提交到 master 分支,70ef78f...3646981
3年前推送了新的提交到 master 分支,95b4ebe...70ef78f
加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/yuanmatansuo/vue-learning.git
git@gitee.com:yuanmatansuo/vue-learning.git
yuanmatansuo
vue-learning
VUE的学习
master

搜索帮助