Vue 学习笔记——简介

骑猪看日落 2021-07-24 23:38 478阅读 0赞

## 一 简介 ##

Vue 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

### 1 安装 ###

*  直接下载并用 `<script>` 标签引入，`Vue` 会被注册为一个全局变量。
 *  NPM 安装
    
    安装后本地就会有vue.js文件，使用`<script>` 标签引入即可
    
        $ npm install vue
         <script src="./node_modules/vue/dist/vue.js"></script>

### 2 声明式渲染 ###

*  创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，它是响应式的。
 *  指令用来简化对dom的一些操作。
 *  声明方法用来做更复杂的操作。methods里面可以封装方法。

<div id="app">
            <input type="text" v-model="num">
            <button v-on:click="num++">点赞</button>
            <button v-on:click="cancle">取消</button>
            <h1> {
       {name}} ,非常帅，有{
       {num}}个人为他点赞{
       {hello()}}</h1>
        </div>
    
        <script src="./node_modules/vue/dist/vue.js"></script>
    
        <script> //1、vue声明式渲染 let vm = new Vue({ el: "#app",//绑定元素 data: { //封装数据 name: "小明", num: 1 }, methods:{ //封装方法 cancle(){ this.num -- ; }, hello(){ return "1" } } }); </script>

### 3 文本插值 ###

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {
       { msg }}</span>

Mustache 标签将会被替代为对应数据对象上 `msg` property 的值。无论何时，绑定的数据对象上 `msg` property 发生了改变，插值处的内容都会更新。

除此之外还可以使用表达式如`{ {1+1}}`

发表评论取消回复

表情：

评论列表（有 0 条评论，478人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE学习：vue简介、vue指令

一、Vue简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue

Love The Way You Lie/ 2023年10月04日 19:41/ 0 赞/ 97 阅读

相关 Vue学习笔记

1. NPM 安装Vue方法由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：[使用淘宝 NPM 镜像][NPM]。 npm 版本

喜欢ヅ旅行/ 2023年02月22日 08:26/ 0 赞/ 88 阅读

相关 Vue学习笔记

文章目录第1章：Vue入门 1.1 Vue简介 1.1.1 官网 1.1.2 介绍描述

一时失言乱红尘/ 2023年01月11日 01:17/ 0 赞/ 43 阅读

相关 vue学习笔记

参考视频：[https://www.bilibili.com/video/BV18E411a7mC?p=3&spm\_id\_from=pageDriver][https_w

谁借莪１个温暖的怀抱￠/ 2022年11月15日 11:58/ 0 赞/ 212 阅读

相关 vue学习笔记

百度网盘：链接：https://pan.baidu.com/s/1mcphFpMPcrUUr8Rgrz2Caw 提取码：rckd 1. Vue.js 目录结

迈不过友情╰/ 2022年10月21日 03:45/ 0 赞/ 70 阅读

相关 vue-学习笔记

准备工作 1.安装 node.js，根据自己的平台下载合适的安装包。 http://nodejs.cn/download/ linux sudo apt

青旅半醒/ 2022年10月05日 06:58/ 0 赞/ 220 阅读

相关 vue学习笔记

1.v-once，只渲染一次 <h1 v-once>{ {message}}</h1> 2.v-html，按照html格式渲染 <h

浅浅的花香味﹌/ 2022年09月13日 12:29/ 0 赞/ 220 阅读

相关 Ngnix学习笔记——简介

一，什么是Ngnix： Nginx是一款 [轻量级][Link 1] 的 [Web][] 服务器/ [反向代理][Link 2] 服务器及 [电子邮件][Link 3] （I

爱被打了一巴掌/ 2022年05月30日 10:59/ 0 赞/ 214 阅读

相关 Vue 学习笔记

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

蔚落/ 2022年04月10日 11:19/ 0 赞/ 238 阅读

相关 Vue 学习笔记——简介

一简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。 1 安装

骑猪看日落/ 2021年07月24日 23:38/ 0 赞/ 479 阅读