Vue.js学习笔记（一）——起步

粽子师兄

已于 2022-02-09 15:55:01 修改

阅读量772

点赞数

分类专栏： vue 文章标签： vue

于 2020-11-01 15:13:16 首次发布

本文链接：https://blog.csdn.net/qq_45268602/article/details/109426563

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js引入方式

直接用<script>引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本地

<script src="./js/vue.js"></script>

声明式渲染

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

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

hello world 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{ title }}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hello world!'
        }
    })
</script>
</html>

在这里插入图片描述
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似。

解析：

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

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

Vue实例中的 el 是一个选择器，就是该Vue实例管理的区域。data 代表要给vue管理的数据，一般我们称之为模型 Model，模型里面的属性，一般称之为模型变量。

在 html 页面中，{{ }} 用于数据绑定。

数据绑定

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

那么{{}} 里面能放什么内容？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <h2>{{ title }}</h2>
    <hr>
    <h2>Mustache里面能放什么内容？</h2>
    <hr>
    <h2>字面量</h2>
    <p>数值型：{{ 123 }}</p>
    <p>字符串：{{ 'hello' }}</p>
    <p>布尔值：{{ true }} - {{ false }}</p>
    <p>数组：{{ [1, 2, 3, 4, 5] }}</p>
    <p>对象：{{ {id: 1, username: 'andy'} }}</p>
    <hr>
    <h2>四则远算</h2>
    <p>加：{{ 1 + 1 }}</p>
    <p>减：{{ 2 - 1 }}</p>
    <p>乘：{{ 2 * 3 }}</p>
    <p>除：{{ 6 / 2 }}</p>
    <p>余：{{ 6 % 4 }}</p>
    <p>...</p>
    <hr>
    <h2>逻辑运算</h2>
    <p>或：{{ true || false }}</p>
    <P>与：{{ true && false }}</P>
    <p>非：{{ !false }} - {{ !true }}</p>
    <p>...</p>
    <hr>
    <h2>条件表达式</h2>
    <p>大于：{{ 2 > 1 }}</p>
    <p>小于：{{ 1 < 2 }}</p>
    <p>大于等于：{{ 2 >= 1 }} - {{ 2 >= 2 }}</p>
    <p>小于等于：{{ 2 <= 3 }} - {{ 2 <= 2 }}</p>
    <p>等于：{{ 1 == 1 }} - {{ 1 == '1' }}</p>
    <p>不等于：{{ 1 != 1 }} - {{ 1 != '1' }}</p>
    <p>恒等于：{{ 1 === 1 }} - {{ 1 === '1' }}</p>
    <p>不恒等于：{{ 1 !== 1 }} - {{ 1 !== '1' }}</p>
    <p>...</p>
    <hr>
    <h2>ECMA里面的一些函数</h2>
    <p>随机数：{{ Math.random() }}</p>
    <p>取整：{{ parseInt(12.3) }}</p>
    <p>...</p>
    <hr>
    <h2>三目运算</h2>
    <p>三目运算：{{ 1 === 1 ? '正确' : '错误' }}</p>
</div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'vue的Mustache语法'
        }
    })
</script>
</html>

粽子师兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记（一）——起步

Vue.js是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js引入方式直接用<script>引入CDN<script src="https://cdn.jsdelivr.net/npm/
复制链接

扫一扫

专栏目录