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.浏览器对象 ...
随机推荐
- Laravel入坑指南(3)——模板
各位小伙伴有缘聚到这里,说明对于Laravel的路由和控制器已经有点了解了. 会写业务逻辑之后,如何把结果漂亮地展示出来,就是我们要解决的问题.(前后端分离的同学,请自动忽略)在MVC的世界里,漂亮的 ...
- LAMP环境部署wordpress
关于搭建LAMP 请参考:https://blog.csdn.net/IndexMan/article/details/122991129 本篇是基于LAMP环境搭建wordpress. 上传word ...
- Oracle 10gR2新SQL提示——opt_param
[English] 搜索Internet 搜索 HelloDBABA 首页 English 中文 技术文档 文章 案例 产品及下载 产品 >> FyDB OraTracer FySafe ...
- Python之猜数字游戏
说明: 本例改编自<Python编程快速上手>.例子很简单我就不多说了 直接上代码,给初学python练手用. 给你6次机会猜对一个预先生成好的1-20之间的整数.覆盖一下知识点: 条件语 ...
- Java 使用SimpleDateFormat格式化日期
Java 使用SimpleDateFormat格式化日期,这里只涉及最实用的方面. 用途 用于格式化日期和解析日期类型字符串. formatting (date -> text), parsin ...
- 封装一些常用的 qt 控件
在 qt 中需要做 toast 效果和图片 tip 效果,故开发了下面一个类 后续会继续添加一些常用的控件 tool_tip.h #include <qlabel.h> #include ...
- 【手写信息搜集工具】ThunderSearch 闪电搜索器
ThunderSearch 闪电搜索器 项目地址:github Windows打包版 利用ZoomEye的官方api,结合开发文档,做了这么一个GUI界面的搜索器.目前支持查询host_search ...
- 【Azure Redis 缓存】Redis的指标显示CPU为70%，而Service Load却达到了100%。这两个指标意义的解释及如何缓解呢？
问题描述 为什么Redis的指标显示CPU为70%,而Service Load却达到了100%, 如何来解释这两个指标,以及如何来缓解这样的情况呢? 问题回答 CPU指标:该值表示的是用于 Redis ...
- C#的Winform程序关于单击和双击的区别 - 开源研究系列文章
前些天编码的时候有个关于应用程序的托盘图标的鼠标Mouse Down里的单击和双击的问题,只是想单击的时候显示主窗体,双击的时候显示操作窗体.但是编码并调试的时候发现Windows的鼠标双击的事件先执 ...
- GenAI助力DevOps，塑造软件工程的未来
自 2022 年以来,GenAI 无疑已成为一种普遍的技术趋势.在本文中,我们将探索 DevOps 中令人兴奋的 GenAI 领域,讨论其潜在优势.局限性.新兴趋势和最佳实践,深入了解 AI 支持的 ...