一、Vue初体验

最新推荐文章于 2021-06-21 16:51:23 发布
最新推荐文章于 2021-06-21 16:51:23 发布
阅读量115 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lin_Willen/article/details/112089967
版权

01-HelloVuejs

代码实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-HelloVuejs</title>
</head>
<body>

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

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
    // let(变量）/const（常量）
    // 编程范式：声明式编程

    // 创建Vue对象的时候，传入了一些option:{}
    // {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，
    // 很明显，这里是挂载到了id为app的元素上
    // {}中包含了data属性：该属性中通常会存储一些数据
    // 这些数据可以是我们直接定义出来的，比如像上面这样
    // 也可能是来自网络，从服务器加载的
    const app = new Vue({
        el: "#app",//用于挂载管理的元素
        data:{//定义数据
            message:"Hello World!"
        }
    })
    //传统js的做法（编程范式：命令式编程）
    //1.创建div元素，设置id属性
    //2.定义一个变量叫message
    //3.message变量放在前面的div元素中显示
</script>
</body>
</html>

运行结果

在这里插入图片描述

02-vue列表展示

代码实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-vue列表展示</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            movies: ['蜘蛛侠','钢铁侠','绿巨人','蝙蝠侠']
        }
    })
</script>
</body>
</html>

运行结果

在这里插入图片描述

Console交互式响应

在这里插入图片描述
在这里插入图片描述

03-vue案例-计数器

代码实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-vue案例-计数器</title>
</head>
<body>

<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })
</script>
</body>
</html>

如果还需监听，打印语句，那么继续写入上述语句就会显得很复杂，所以我们不妨封装一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-vue案例-计数器</title>
</head>
<body>

<div id="app">
    <h2>当前计数:{{counter}}</h2>

    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add:function () {
                console.log('add被执行');
                // vm.counter++; 等价于下面的
                this.counter++;
            },
            sub:function () {
                console.log('sub被执行');
                // vm.counter--; 等价于下面的
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

MVVM

（一）模型图

（二）View层

  • 视图层
  • 在前端开发中，通常就是DOM层
  • 主要作用是给用户展示各种信息

（三）Model层

  • 数据层
  • 数据可能使我们固定的死数据，更多的事来自我们服务器，从网络上请求下来的数据
  • 在计数器案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单

（四）VueModel层

  • 视图模型层
  • 视图模型层是view和Model沟通的桥梁
  • 一方面它实现Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
    另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch等）时，可以监听到，并在需要的情况下改变对应的Data

options选项

（一）el:

  • 类型：string|HTMLElement
  • 作用：决定之后Vue实例会管理哪一个DOM

（二）data:

  • 类型：Object | Function（组件当中data必须是一个函数）
  • 作用：Vue实例对应的数据对象

（三）methods:

  • 类型：{[key:string]:Function}
  • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

Vue的生命周期

在这里插入图片描述

04-vue的template

模板代码

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

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })
</script>

idea设置步骤
在这里插入图片描述

不会Java怎么找女朋友
关注
专栏目录
Vue3通透教程【三】Vue3代码初体验找不同
官方推荐
02-13 5万+
初体验Vite构建Vue3项目工程入口文件的不同
Vue3通透教程【四】Vue3组合API初体验
最新发布
官方推荐
02-20 4万+
初步了解Vue的组合API和Vue2的选项式API视觉差距！
插值操作
KEY_cheung的博客
08-15 284
1.mustache语法，不仅可以直接写变量，还可以写简单的表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>template</title> </head> <body> <div id = "app"> <h2>{{message}}</h2> ...
Vue——第一个Vue程序——2020.11.12
weixin_43402353的博客
11-12 520
一丶直接上源码，解释在注释，不懂评论留言，必回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div> <script src="../js/vue.js">
Vue之插值操作
qq_44756582的博客
06-03 1875
插值操作 个人博客 https://www.boycharse.top Vue系列 01-Vue的初体验 Vue的插值操作 什么是插值操作 我们紧接上一篇的例子： 在网页的显示中，vue中的message插入到了{{message}}中，这就是我们所说的插值操作。 Mustache插值 这种插值操作我们已经见过了，几乎是最常用的一种，也就是用{{}}来进行插值。 {{}}中是一个变量时 {{}}中的可以是一个变量，如： {{message}}中的message是data中的message变量。 {{}}
基于vue-ssr的静态网站生成器VuePress 初体验
08-27
基于Vue-SSR的静态网站生成器VuePress初体验 VuePress是基于Vue的轻量级静态网站生成器，旨在满足Vue自己的子项目文档需求。它提供了预加载的HTML，加载速度极佳，同时对SEO非常友好。VuePress由两部分组成：一个...
Vue学习第二章-插值的操作
codekiang的博客
02-22 156
插值操作 这一章简单可以跟第三章一起学完。 插值操作有：v-once,v-html,v-text,v-pre等 上一章提到的mustache(双大括号语法)就是其中的插值操作。 v-once v-once 表示元素跟组件只会被渲染一次，不会随着改变数据而改变 <!DOCTYPE html> <html lang="en"> <head> <meta...
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 一、插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello Vue! } }) 由于插值表达式的语法是{{}} 因而也被称为mustache胡子
插值--原始HTML
蓝墨の学习笔记
08-27 818
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>插值--原始 HTML</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app
如何用HTML语言图像插值,指令1——（插值表达式/v-cloak/v-text/v-html）
weixin_34794738的博客
06-04 793
一、mustache插值表达式即两个大括号({{}})，在标签元素内容中使用，传入变量，显示Vue对象data中的值。{{ msg }}var vm = new Vue({el:'#app',data:{msg:'123'}})浏览器显示二、v-cloak网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标...
（三）插值操作
qq_45853870的博客
10-18 195
（三）插值操作 3.1 Mustache语法 ​ mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。 ​ 在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
[Vue学习笔记] 插值 - HTML 标签
GYK0812的博客
01-31 333
使用 {{ 变量 }} 的方式在HTML 中添加值， 此时变量会以字符串的形式显示，那么如果我们想添加的变量对应的是一个 HTML 标签，应该如何操作呢？ <p id="app">Using mustaches: <span v-html="rawHtml"></span></p> <script type="text/javascript"> var vm = new Vue({ el: '#app'
HTML文本插值过滤
Byte_Dance的博客
08-07 522
在对DOM节点插入数据的时候,如果输入的插值正好是一个HTML标签.那么插入进去的话会对页面造成破坏,影响显示效果.那么我们就要对页面插值进行过滤,具体方式是用正则对 &lt; &gt; 两个符号进行替换成字符显示.例如 : &lt;body&gt; &lt;div id="divs"&gt; &lt;/div&gt; &lt;script&gt; ...
在vue中举例说明html差值,vue模板语法-插值详解
weixin_42512249的博客
06-21 407
1.文本数据绑定最常见的形式就是使用‘Mustache'语法(双打括号)的文本插值：message:{{msg}}使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。但请留心这回影响到该节点上所有的数据绑定：this will nver change:{{message}}2.纯html双打括号会将数据解释为纯文本，而非html。为了输出html可以使用v-html指令...
10Vue - 模板语法（插值-纯HTML）
阿甘兄
07-26 456
双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令： <div v-html="rawHtml"></div> 被插入的内容都会被当做 HTML —— 数据绑定会被忽略。 注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。 你的站点上...
Vue3.0初体验：项目搭建与核心特性
"Vue3.0的初体验和项目搭建教程" Vue3.0作为Vue.js框架的最新版本，带来了显著的改进和优化，提升了整体性能，并引入了一系列新特性。以下是对这些变化的详细说明： 1. **性能提升 (Performance)**: Vue3.0在性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值