Vue 学习笔记——简介

骑猪看日落 2021-07-24 23:38 384阅读 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 条评论，384人围观）

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

相关阅读

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

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

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

相关 vue学习笔记

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

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

相关 Vue学习笔记

技术点目录认识 Vue 认识数据驱动模式认识 MVVM 模式 [模版语法][Link 1] [样式绑定][Link 2] [Vue

心已赠人/ 2022年07月24日 10:19/ 0 赞/ 193 阅读

相关 Ngnix学习笔记——简介

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

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

相关 vue学习笔记

1. import vue from ‘vue’ 引入的vue有vue基础库package.json中的main字段决定，可在webpack中进行别名配置 [ht

逃离我推掉我的手/ 2022年05月14日 02:12/ 0 赞/ 198 阅读

相关 Vue 学习笔记

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

我会带着你远行/ 2022年04月25日 00:32/ 0 赞/ 243 阅读

相关 Vue学习笔记

<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="ht

矫情吗；*/ 2022年03月29日 21:29/ 0 赞/ 287 阅读

相关 Vue 学习笔记——简介

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

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

相关 vue学习笔记

1. v-on可以简写为@ 元素外使用 2. v-bind简写为空元素内使用 3. v-html是把vue实例内容作为html元素，而v-tex

电玩女神/ 2021年06月22日 15:37/ 0 赞/ 670 阅读

相关 vue学习笔记

vue 引入vue.js 第一个vue程序 vue指令 v-if v-for v-bind

Bertha 。/ 2021年06月10日 20:40/ 0 赞/ 440 阅读