一、初识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. Jenkins安装和Host key verification failed问题的处理

    在Centos7上安装的Jenkins 2.303.1 命令行安装为服务 因为新版本的Jenkins的war是用java -jar启动, 并且无法后台运行, 所以要么通过screen创建一个sessi ...

  2. Ubuntu18.04 Server部署Flannel网络的Kubernetes

    准备服务器 ESXi6.5安装Ubuntu18.04 Server, 使用三台主机, 计划使用hostname为 kube01, kube02, kube03, 配置为2核4G/160G, K8s要求 ...

  3. 【OpenGL ES】正方形图片贴到圆形上

    1 前言 ​ 纹理贴图 中介绍了将矩形图片贴到矩形模型上,本文将介绍:在不裁剪图片的情况下,将正方形的图片贴到圆形模型上. ​ 思考:实数区间 [0, 1] 与 [0, 2] 的元素可以建立一一映射关 ...

  4. 全排列II

    全排列II 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 题解 /** * @param { ...

  5. xml开发笔记（一）：tinyXml2库介绍、编译和工程模板

    前言   Qt开发Xml相关技术,使用到tinyxml2库.   TinyXML   TinyXML是一个简单的.小的C++的XML解析器,可以集成到其他程序中.它是ROS的标准XML解析器.  最新 ...

  6. go语言range语句中的值的坑

    在range语句中生成的数据的值是真实集合元素的副本,它们不是原有元素的引用.这意味着更新这些值将不会 修改原来的数据,同时也意味着使用这些值的地址将不会得到原有数据的指针. package main ...

  7. Springboot 撞上 NebulaGraph——NGbatis 初体验

    本文首发于 NebulaGraph 公众号 https://mp.weixin.qq.com/s/z56o6AEz1Z4RmS8Zdx6dTA 大家好,我是开源项目 NGbatis 的发起人大叶(Co ...

  8. Java 基本数据类型之间的运算规则

    1 /*** 2 * 基本数据类型之间的运算规则 3 * 4 * 前提:7中基本数据类型运算 5 * 6 * 1.自动类型提升: 7 * 当容量小的类型与容量大的数据类型的变量做运算时,结果自动提升为 ...

  9. 小工具 --- 百度翻译API翻译工具

    引言 最近想把一些英文官方文档的资料翻译成中文,然后转化为Markdown文档,然后发现百度通用翻译的API有不错的免费额度,个人申请也能申请到高级版.这个额度足够个人的日常使用了. 如何使用 如何使 ...

  10. clickhouse快速上手和问题记录

    clickhouse官方中文社区实战经验:手把手教你搭建单机clickhouse开发环境 我是用的是centOS7的虚拟机, 官方教程中的:sudo /etc/init.d/clickhouse-se ...