VUE准备工作

柔光的暖阳◎ 2022-12-07 15:12 122阅读 0赞

1.了解vue简单历程，组成部分

Vue是一个构建数据驱动的web界面的渐进式框架，采用自底向上增量开发的设计。VUe.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

Vue只关注视图层

Vue通过新的属性（自定义）和（表达式）扩展了HTML

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

Vue学习起来非常简单

①范例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport"  content="width=device-with,initial-scale=1.0" />
    		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    		<title></title>
    		<script src="js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<p>{
       {message}}</p>
    			<input type="text" v-model="message"/>
    		</div>
    		<script>
    			new Vue({
    				el:"#app",
    				data:{
    					message:"hello vue"
    				}
    			})
    		</script>
    	</body>
    </html>

②效果

![20200916154241935.png][]

③了解部分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70][]

2.Vue特性

*         轻量
 *            Vue.js库的体积非常小的，并且不依赖其他基础库
 *         数据绑定
 *             对于一些富交互、装填机类似的前端UI界面，数据绑定非常简单，方便。
 *         指令
 *             内置指令统一为（v-\*）,也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM.
 *         插件化
 *              Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件
 *         组件化
 *               组件可以扩展HTML元素，封装可重用的代码，允许我们使用小型、自包含和通用可复用的组件构建大型应用

3.简单实用vue,切入实践的一些准备工作

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

[20200916154241935.png]: /images/20221123/e48fbf5bf83140c2a5f0717d4fea6a37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTkyMTgyMQ_size_16_color_FFFFFF_t_70]: /images/20221123/4ab951194b674c17bc6d08b6e43f612d.png