Vue.Js简介与数据渲染

傷城~ 2022-12-06 12:41 177阅读 0赞

#### Vue.Js是什么 ####

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

#### Vue.js的安装 ####

直接使用script标签进行导入即可，

第一种：开发环境版本，包含了有帮助的命令行警告

第二种：生产环境版本，优化了尺寸和速度

第三种：下载Vue.js文件，使用script标签导入 ：[https://cn.vuejs.org/js/vue.js][https_cn.vuejs.org_js_vue.js]

#### 声明式渲染 ####

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

在HTML当中进行对数据的渲染

<div id="app">
      { {  message }}
    </div>

在js当中声明Vue对象进行对数据的绑定，el表示对那个元素进行挂载，这里不单单只是可以对id进行挂载，对class 标签名都可以进行挂载。而data当中表示对元素进行数据绑定

var app = new Vue({ 
      el: '#app',
      data: { 
        message: 'Hello Vue!'
      }
    })

运行查看效果  
![在这里插入图片描述][20200913102928188.png_pic_center]

#### 关于el挂载点存在的问题： ####

**Vue实例的作用范围是什么呢?**  
Vue会管理el选项命中的元素及其内部的后代元素

**是否可以使用其他的选择器?**  
可以使用其他的选择器;但是建议使用ID选择器

**是否可以设置其他的dom元素呢?**  
可以使用其他的双标签,不能使用HTML和BODY

#### data数据对象 ####

在前面保存了简单的String型，外加复杂的数据，如数组、对象等

data: { 
    				massage: "Hello Vue!",
    				school: { 
    					name: "长沙民政学院",
    					add: "长沙市雨花区香樟路22号"
    				},
    				campus:["软件系","民社系","外语系"]
    			}

对于对象使用`.`获取对象的值，而对于数组使用索引进行获取即可

<div id="app">
    			{ {  massage }}
    			<h3>
    				{ {  school.name }}
    				{ {  school.add }}
    			</h3>
    			<h3>
    				{ { campus[0]}}
    			</h3>
    		</div>

在浏览器当中进行查看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]

[https_cn.vuejs.org_js_vue.js]: https://cn.vuejs.org/js/vue.js
[20200913102928188.png_pic_center]: /images/20221123/a5d1c500e28f4ed5b68331f8a3d41f4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fe258237fb4b4f9b845adc24f4380af5.png