2021-07-14-vue 通俗易懂版解释

在座的各位都是大佬

已于 2022-05-19 16:08:47 修改

阅读量158

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-05-10 13:55:51 首次发布

原文链接：https://www.cnblogs.com/keepfool/p/5619070.html

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

https://www.cnblogs.com/keepfool/p/5619070.html
这篇文章太强了，我一个小白竟然可以看懂！

vue

在这里插入图片描述
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

Hello World示例
了解一门语言，或者学习一门新技术，编写Hello World示例是我们的必经之路。
这段代码在画面上输出"Hello World!"。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--这是我们的View-->
		<div id="app">
			{{ message }}
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		// 这是我们的Model
		var exampleData = {
			message: 'Hello World!'
		}

		// 创建一个 Vue 实例或 "ViewModel"
		// 它连接 View 与 Model
		new Vue({
			el: '#app',
			data: exampleData
		})
	</script>
</html>

就是很强，这个例子，一看就咚咚咚咚
2021.11.9号复看，还是觉得很强
2022.5.10 复看依旧很强

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>Hello, Vue.js!</h1>
			<h1 v-if="yes">Yes!</h1>
			<h1 v-if="no">No!</h1>
			<h1 v-if="age >= 25">Age: {{ age }}</h1>
			<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		
		var vm = new Vue({
			el: '#app',
			data: {
				yes: true,
				no: false,
				age: 28,
				name: 'keepfool'
			}
		})
	</script>
</html>

双向绑定示例

MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

这是我们的View

<div id="app">
	<p>{{ message }}</p>
	<input type="text" v-model="message"/>
</div>

写法问题一

1.data与methods之间需要有逗号

2.写法v-on:click=“change()”

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  },


  methods:{
		change:function(){
				app3.seen=false;
		}
  }
})

3.向vue app4中的todo数组中加一行

1.app4.todos.push({ text: ‘新项目’ })；

2.可由app5直接获取元素，可以不用this；

4.获取数据？？

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})


vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

## v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

## v-if

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

```bash
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  },methods : {
	app3.seen = true;	
}
})

继续vue cli脚手架

1.快速开发交互式系统，有着最基础配置，不用自己配置，就可以开始搭建项目，所以不太懂配置也可以，
2.很像maven构建项目，根据模板快速构建项目；
3.将开发过程中，工具–一些东西标准化，基础配置就可以运行工程，专注于代码。
4.斌且有着依赖，改依赖可以审计和替换

npm node.js

1.node.js标准的软件包管理器,所以可以直接用npm
2.node.js一个开源与跨平台的 JavaScript 运行时环境

https://zhuanlan.zhihu.com/p/378808997
搭建vue-cli工程
1。下载node。js
2。安装 vye-cli
https://cli.vuejs.org/zh/guide/#cli
官方cli

js运行环境

宿主环境和执行期环境构成，执行期环境是有js解释器（嵌入在宿主环境）生成。
在这里插入图片描述

## vm 理解

https://www.csdn.net/tags/OtDaEg2sMTI3MTQtYmxvZwO0O0OO0O0O.html
视窗宽度

1vw 等于视窗宽度的1%

100vw 等于视窗宽度的100%

Vue中的Setup()函数的使用

https://blog.csdn.net/haha_556/article/details/119025246

在这里插入图片描述

父子组件传值

https://blog.csdn.net/weixin_42486438/article/details/123945601

帅气背景滑动

    /* 长引用 */
    .quote-wrap {
        padding: 10px 150px;
        background-color: #585a57;
        height: 300px;
        background-image: url("../../images/portal-sc/banner.png");
        background-repeat: no-repeat;
        background-attachment: fixed; /*让图片固定住而不是随网页和div移动*/
        background-size: 100%; /*这个属性是让图片大小填充div的关键*/
    }