vue初学核心基础
一、初识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初学核心基础的更多相关文章
- vue初学：基础概念
一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同j ...
- Servlet---JavaWeb技术的核心基础，JavaWeb框架的基石(一)
初学JavaWeb开发,请远离各种框架,从Servlet开始. Web框架是开发者在使用某种语言编写Web应用服务端是关于架构的最佳实践.很多Web框架是从实际的Web项目抽取出来的, ...
- Vue.js应用基础
声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...
- Androd核心基础01
Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...
- css核心基础总结篇
今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解 ...
- Android应用的核心基础
Android4开发入门经典 之 第二部分:Android应用的核心基础 Android应用中的组件 Application Components Android应用中最主要的组件是: 1:Activ ...
- C#核心基础--类(2)
C#核心基础--类的声明 类是使用关键字 class 声明的,如下面的示例所示: 访问修饰符 class 类名 { //类成员: // Methods, properties, fields, eve ...
- （1） css的核心基础
css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...
- CSS 设计彻底研究（一）(X)HTML与CSS核心基础
第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...
- JavaScript编程：javaScript核心基础语法
1.javaScript核心基础语法: javaScript技术体系包含了5个内容: 1.核心语言定义: 2.原生对象和雷子对象: 3.浏览器对象 ...
随机推荐
- NC24949 [USACO 2008 Jan S]Running
题目链接 题目 题目描述 The cows are trying to become better athletes, so Bessie is running on a track for exac ...
- Eclipse文本编码格式修改为UTF-8 的方法
整理自网络,亲测可用,记录一下,方便下次查. 一般Java文件编码格式是UTF-8的.以下以默认GBK改为UTF-8为例. 1.改变整个工作空间的编码格式,这样以后新建的文件也是新设置的编码格式. e ...
- 《系列二》-- 7、后置处理器-PostProcessor
目录 什么是后置处理器 spring 源码中已知的,顶级PostProcessor 其它 "后置处理器" 阅读之前要注意的东西:本文就是主打流水账式的源码阅读,主导的是一个参考,主 ...
- 机器学习策略篇：详解正交化（Orthogonalization）
正交化 这是一张老式电视图片,有很多旋钮可以用来调整图像的各种性质,所以对于这些旧式电视,可能有一个旋钮用来调图像垂直方向的高度,另外有一个旋钮用来调图像宽度,也许还有一个旋钮用来调梯形角度,还有一个 ...
- centos8.x阿里源配置
>>> cd /etc/yum.repo.d >>> mkdir bak >>> mv *.repo bak/ >>> cd b ...
- 1.Go 的基本数据类型
Go 的基本数据类型
- 【LeetCode双指针】合并两个有序数组，从后向前遍历
合并两个有序数组 https://leetcode.cn/problems/merge-sorted-array/ 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m ...
- 【Azure Redis 缓存】Azure Reids是否可以开启慢日志(slowlog)和执行config指令
问题描述 使用Azure Redis,是否可以开启慢日志来查看最近时间中执行比较耗时的指令呢? 同时,如何执行Redis的Config只能来修改配置呢? 根本原因 一:Azure Reids通过Red ...
- Java 多线程------多线程的创建（2），方式一：继承于Thread类
1 package com.bytezero.threadexer; 2 3 /** 4 * 创建两个分线程,其中一个线程遍历100以内的偶数,另一个线程遍历100以内的奇数 5 * 6 * 7 * ...
- P8+架构师养成计划
一.P8+要求 1.收集能力要求 1.专业能力 技术架构.业务架构.做到无中生有. 2.基石能力 沟通协调能力.团队管理能力.逻辑能力.风险控制能力. 3.影响力 团队内部影响.外部影响.行业影响力. ...