一、初识vue

1.vue的使用

导入vue之后创建vue模块，el属性表示控制区域的id名称，data表示该区域内的数据

在vue中我们都是用表中模板的标准语法来传递数据

<head>

    <meta charset="UTF-8">

    <title>02-Vue基本模板</title>

    <!--1.下载导入Vue.js-->

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

</head>

<body>

<div id="app">

    <p>{{ name }}</p>

</div>

<script>

    // 2.创建一个Vue的实例对象

    let vue = new Vue({

        // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域

        el: '#app',

        // 4.告诉Vue的实例对象, 被控制区域的数据是什么

        data: {

            name: "wlw"

        }

    });

</script>

</body>

2.vue数据的单向传递

2.1MVVM设计模式

在了解vue单项数据传递之前先了解下mvvm设计模式

在MVVM设计模式中由3个部分组成：

M : Model 数据模型(保存数据, 处理数据业务逻辑)

V : View 视图(展示数据, 与用户交互)

VM: View Model 数据模型和视图的桥梁 (M是中国人, V是鬼子, VM就是茅山道士)

MVVM设计模式最大的特点就是支持数据的双向传递

数据可以从 M -> VM -> V

也可以从 V -> VM -> M

2.2vue数据的单向传递

Vue其实是基于MVVM设计模式的

被控制的区域: View

Vue实例对象 : View Model

实例对象中的data: Model

数据传给vue对象，vue对象再传给界面

model => view model => view

3.vue数据的双向传递

默认情况下Vue只支持数据单向传递 M -> VM -> V

但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力

在、 及 <select> 元素上可以用 v-model 指令创建双向数据绑定</p>
<p>注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值<br>
而总是将 Vue 实例的数据作为数据来源</p>
<pre><code><div id="wlw">
<p>{{name}}</p>
<p>{{age}}</p>
<input type="text" v-model="msg">
</div>
<script>
let vue = new Vue({
el: "#wlw",
data: {
name: "weilw",
age: 18,
msg: ""
}
})
</script>
</code></pre>
<h3 id="二vue常用指令">二、vue常用指令</h3>
<h4 id="1什么是指令">1.什么是指令</h4>
<p>指令就是Vue内部提供的一些自定义属性,<br>
这些属性中封装好了Vue内部实现的一些功能<br>
只要使用这些指令就可以使用Vue中实现的这些功能</p>
<h4 id="2v-once">2.v-once</h4>
<p>让界面不要跟着数据变化, 只渲染一次</p>
<pre><code><div id="wlw">
<span>原始数据</span>
<input type="text" v-once v-model="msg">
<span>修改数据</span>
<input type="text" v-model="msg">
</div>
<script>
let vue = new Vue({
el: "#wlw",
data: {
msg: ""
}
})
</script>
</code></pre>
<h4 id="3v-cloak">3.v-cloak</h4>
<p>Vue数据绑定过程会先将未绑定数据的界面展示给用户，然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码，最后再将绑定数据之后的HTML渲染到界面上。<br>
正是在最终的HTML被生成渲染之前会先显示模板内容，所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容。<br>
利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面，等到生成HTML渲染之后再重新显示。</p>
<pre><code><style>
[v-cloak]{
display: none;
}
</style>
</code></pre>
<pre><code><div id="wlw" v-cloak>
<p>{{name}}</p>
</div>
<script src="vue/vue.js"></script>
<script>
let vue = new Vue({
el: "#wlw",
data: {
name: "wlw",
}
})
</script>
</code></pre>
<h4 id="4v-text和v-html">4.v-text和v-html</h4>
<p>v-text和v-html和innerText与innerHtml类似。<br>
v-text和v-html会覆盖原有内容，v-text不会解析html的内容，而v-html会解析html的内容。</p>
<pre><code><div id="v-html_v-text">
<p v-text="name">++++</p>
<p v-html="age">++++</p>
</div>
</code></pre>
<pre><code> let vue = new Vue({
el: "#v-html_v-text",
data: {
name: "wlw",
age: "<span>今年18</span>"
}
})
</code></pre>
<h4 id="5v-if">5.v-if</h4>
<p>条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素<br>
如果条件不满足根本就不会创建这个元素(重点)</p>
<h5 id="v-if注意点">v-if注意点</h5>
<ul>
<li>v-if可以从模型中获取数据</li>
<li>v-if也可以直接赋值一个表达式</li>
</ul>
<h5 id="v-else指令">v-else指令</h5>
<p>v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容</p>
<h5 id="v-else注意点">v-else注意点</h5>
<ul>
<li>v-else不能单独出现</li>
<li>v-if和v-else中间不能出现其它内容</li>
</ul>
<h5 id="v-else-if指令">v-else-if指令</h5>
<p>v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个</p>
<h5 id="v-else-if注意点">v-else-if注意点</h5>
<ul>
<li>和v-else一样</li>
</ul>
<h4 id="6v-show">6.v-show</h4>
<p>v-show和v-if基本类似<br>
不同点：<br>
v-if会不断的创建删除节点，十分消耗性能<br>
v-show不会创建节点，取值为true时显示，取值为false时，会添加display=none；</p>
<h4 id="7v-for">7.v-for</h4>
<p>相当于JS中的for in循环, 可以根据数据多次渲染元素</p>
<p>v-for特点<br>
可以遍历 数组, 字符, 数字, 对象</p>
<pre><code><div ID="app">
<li v-for="(value, key) in obj">{{key}} --- {{value}}</li>
</div>
</code></pre>
<pre><code><script>
let vue = new Vue({
el: "#app",
data: {
obj: {
name: "wlw",
age: 18,
duty: "study"
}
}
})
</script>
</code></pre>
<h4 id="8v-bind">8.v-bind</h4>
<p>在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html<br>
但是如果想给"元素的属性"绑定数据, 就必须使用v-bind<br>
所以v-bind的作用是专门用于给"元素的属性"绑定数据的</p>
<ul>
<li>
<p>v-bind格式<br>
v-bind:属性名称="绑定的数据"<br>
:属性名称="绑定的数据"</p>
</li>
<li>
<p>v-bind特点<br>
赋值的数据可以是任意一个合法的JS表达式<br>
例如: :属性名称="age + 1"</p>
</li>
</ul>
<pre><code><div ID="app">
<input type="text" v-bind:value="name">
<input type="text" :value="age + 1">
</div>
</code></pre>
<pre><code><script>
let vue = new Vue({
el: "#app",
data: {
name: "wlw",
age: 18
}
})
</script>
</code></pre>
<h4 id="9未完待续">9.未完待续</h4>

vue初学核心基础的更多相关文章

  1. vue初学：基础概念

    一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同j ...

  2. Servlet---JavaWeb技术的核心基础，JavaWeb框架的基石(一)

    初学JavaWeb开发,请远离各种框架,从Servlet开始.         Web框架是开发者在使用某种语言编写Web应用服务端是关于架构的最佳实践.很多Web框架是从实际的Web项目抽取出来的, ...

  3. Vue.js应用基础

    声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...

  4. Androd核心基础01

    Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...

  5. css核心基础总结篇

    今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解 ...

  6. Android应用的核心基础

    Android4开发入门经典 之 第二部分:Android应用的核心基础 Android应用中的组件 Application Components Android应用中最主要的组件是: 1:Activ ...

  7. C#核心基础--类(2)

    C#核心基础--类的声明 类是使用关键字 class 声明的,如下面的示例所示: 访问修饰符 class 类名 { //类成员: // Methods, properties, fields, eve ...

  8. （1） css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  9. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  10. JavaScript编程：javaScript核心基础语法

    1.javaScript核心基础语法: javaScript技术体系包含了5个内容:          1.核心语言定义:          2.原生对象和雷子对象:          3.浏览器对象 ...

随机推荐

  1. NC16527 [NOIP2013]货车运输

    题目链接 题目 题目描述 A 国有 n 座城市,编号从 1 到 n ,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆 ...

  2. NC20154 [JSOI2007]建筑抢修

    题目链接 题目 题目描述 小刚在玩JSOI提供的一个称之为"建筑抢修"的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设施受到了严 ...

  3. java 从零开始手写 redis（五）过期策略的另一种实现思路

    前言 java从零手写实现redis(一)如何实现固定大小的缓存? java从零手写实现redis(三)redis expire 过期原理 java从零手写实现redis(三)内存数据如何重启不丢失? ...

  4. 从零开始手写 mybatis（二）mybatis interceptor 插件机制详解

    前景回顾 第一节 从零开始手写 mybatis(一)MVP 版本 中我们实现了一个最基本的可以运行的 mybatis. 常言道,万事开头难,然后中间难. mybatis 的插件机制是 mybatis ...

  5. TS内置类型与拓展

    TS内置类型与拓展 TypeScript具有类型系统,且是JavaScript的超集,其可以编译成普通的JavaScript代码,也就是说,其是带有类型检查的JavaScript. 内置类型 Type ...

  6. 如何申请免费的SSL证书和通配符证书

    一,目前免费证书普遍存在的痛点 证书有效期普遍只有3个月 2023年12月22日阿里云官方发布公告,后续免费证书的有效期统一调整为3个月,我相信其它厂商很快也会做出调整. 调整为3个月有效期后,意味着 ...

  7. lock锁，Semaphore信号量，Event事件，进程队列Queue，生产者消费者模型，JoinableQueue---day31

    1.lock锁 # ### 锁 lock from multiprocessing import Process,Lock import json,time # (1) lock的基本语法 " ...

  8. Q查询的高级用法

    示例:如前端需要通过下拉框选择需要通过什么过滤字段来查询输入的关键字,后端如何使用Q查询过滤包含输入的关键字呢? def customers(request): search_field = requ ...

  9. 【LeetCode贪心#04】跳跃游戏I + II

    跳跃游戏 力扣题目链接(opens new window) 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示 ...

  10. 【Azure 应用服务】Azure Function Python函数中，如何获取Event Hub Trigger的消息Event所属于的PartitionID呢？

    问题描述 在通过Azure Function消费Event Hub中的消息时,我们从Function 的 Trigger Details 日志中,可以获得当前Funciton中处理的消息是哪一个分区( ...