一、初识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. 计网学习笔记九 Routing Fundamentals

    在这一讲开始讲路由器的控制平面.简单介绍了routing,两个最小cost算法. 参考看的文章: VC网络中的路由 VC网络和数据报网络中路由的区别:Differences between Virtu ...

  2. Redis+Lua实现简易的秒杀抢购

    1  商品抢购 主要逻辑是:减库存,记录抢购成功的用户 @RestController public class DemoController { @Resource private StringRe ...

  3. 面试官：谈一谈你对 redis 分布式锁的理解

    ​为什么需要分布式锁 在 jdk 中为我们提供了多种加锁的方式: (1)synchronized 关键字 (2)volatile + CAS 实现的乐观锁 (3)ReadWriteLock 读写锁 ( ...

  4. Js中Proxy对象

    Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找.赋值.枚举.函数调用等. 语法 const proxy = new Proxy(target, handler); ta ...

  5. VuePress + Github Pages 搭建文档博客

    说明 最近想把常用的一些干货知识点都集中起来,方便发布和查找.相当于创建一个自己的知识库,我就叫它Java技术文档.虽然博客写文档也挺方便,但是在于文档的集中阅读和管理方面还是不够简洁和快速.此处就以 ...

  6. Oracle代码封装工具和DBMS_DDL包的使用

    The WRAP Utility and the DBMS_DDL Package On occasion it is necessary to hide (obfuscate) your PL/SQ ...

  7. AIGC程序员效能提升之道

    得益于IT产业近几年的繁荣,老杨所在公司的业务也出奇的兴隆,每天干不完的工作背后,也意味着健康的消耗和体重的不断增加. 曾记否,刚毕业的老杨体重刚刚堪堪破百,同事们经常调侃他说是一阵风就能吹走,经过了 ...

  8. 解析Spring中的循环依赖问题：再探三级缓存（AOP）

    前言 在之前的内容中,我们简要探讨了循环依赖,并指出仅通过引入二级缓存即可解决此问题.然而,你可能会好奇为何在Spring框架中还需要引入三级缓存singletonFactories.在前述总结中,我 ...

  9. 【Azure 事件中心】如何查看Event Hub的生产者或者是消费者端的IP地址呢？

    问题描述 哪些客户端 IP 正在向/从Azure Event Hub发送/接收事件?如何来查看Event Hub的生产者端,消费者端的IP地址呢? 问题解答 如果需要查看Event Hub 服务端的日 ...

  10. MongoDB可视化compass 连接数据库失败Invalid UTF-8 string in BSON document

    An error occurred while loading navigation: Invalid UTF-8 string in BSON document 出现这个问题建议降低compass版 ...