Vue基础一

最新推荐文章于 2022-09-14 11:14:31 发布

happy sun

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44309406/article/details/103656423

vue 专栏收录该内容

7 篇文章

订阅专栏

本文回顾了前端从静态页面到动态交互的发展历程，重点介绍了Vue框架的特点与使用方法，包括MVVM模式、虚拟DOM、指令系统及模板语法，适合前端开发者深入理解现代Web开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端发展历史

1，网页制作  没有ajax 纯展示为主
2，ajax 功能复杂  开发模式 是以后台MVC为主导  前端：写静态页 js jquery效果
3，backbone  angular 1.x   mvc
4，mvvm react vue  前后台分离  spa single page application
大前端：多端 web 原生(uni)  小程序  nodejs（中间层） tato

vue

前端MVVM框架

MVVM：

双向数据绑定，当数据变化视图自动更新，视图更新数据也会变化

vue雏形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    
    <div id="box">
        <input type="text" v-model="msg">
       <div>
            {{ msg }}
       </div>
    </div>
   
    <script>
        let vm = new Vue({
            el:"#box", //定义vue 控制范围
            data:{
                msg:"你好我是数据"     
            }
        });
    </script>
</body>
</html>

vue双向绑定原理：

https://www.cnblogs.com/zhenfei-jiang/p/7542900.html

虚拟dom

<div id="box">
	<div class="xx">我是div</div>
	<ul>
		<li class="item1">1</li>
		<li class="item2">2</li>
		<li class="item3">3</li>
	</ul>
</div>

{
	tagName:"div",
	props:{
		id:"box"
	},
	children:[
		{
			tagName:"div",
			props:{
				className:'xx',
				children:['我是div']
			}
		},
		{
			xxxxx
			xx
		}
	]
}

vue模板语法：

{{  }}

将vue实例中data属性的值 和 视图进行绑定
模板中 可以写js表达式 此时里面的 变量只能是 data中的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        {{ msg }}
        {{ dt==1?'真':'假' }}
        <!-- {{ alert(1) }} -->
        {{ 2+4+5 }}
        {{ html }}
    </div>
    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                dt:1,
                msg:"hello vue",
                html:"<h1>我是标题</h1>" //并没有渲染成真的html
            }
        })
    </script>
</body>
</html>
html标签不渲染？
	防止 xss以及csrf攻击
	<a href="javascript:alert(document.cookie)"></a>

vue指令 directives

扩展了html 属性的功能一些vue自定义的属性这些属性是有功能的

v-指令名字  使用方法 同html属性 属性值是与 vue某个数据所绑定的
1,v-text  将某个元素的 text内容 与 data中的值绑定
2，v-html 将元素的内容 与data中的值进行绑定 会解析 html
3，v-bind:属性名  扩展了html属性功能 让属性的值 与data进行绑定 
	注意:这个属性可以是 标签默认的属性 以及自定义的属性
		简写 :属性名  推荐使用简写
4，v-model 将表单的值 与data进行绑定
5，v-on:事件="值"  扩展了html 事件的功能 事件的值 自定变成事件函数 函数是vue函数 自动找vue函数
	注意：
		vue事件 值是事件函数 函数是vue的方法 方法定义在 实例的methods属性中
		简写 @事件名
		值可以写括号 也可以不写括号？什么时候应该写括号：传参

学vue之前记住两句话：
	1，一切以数据为核心 不要操作dom
	2，原生js方法 属性 vue不能用
		如何打通：methods中的方法中可以写 原生的所有js
	3，vue提供了一个全局data  $event 写在事件函数调用中 这个变量就是 事件对象
问题？
	methods中的方法 如何改变 data中的数