vue小结(一)el与data基础部分

vue是一个简化Dom操作、响应式数据驱动的JavaScript框架,其开发者为尤雨溪,国产开源项目,值得骄傲。中文文档主页为:<a href="https://cn.vuejs.org" target="_blank" rel="noopener noreferrer">https://cn.vuejs.org</a> 。近期找了一套教程学习下。有兴趣的同学,可以小额捐赠下,找我要视频和教程相关资料。

一、第一个Vue程序

这里先不涉及vue-cli的使用,先直接引入html页面中使用。使用步骤为:



<br />
  • 导入开发版本的Vue.js
  • 创建Vue实例对象, 设置el属性和data属性
  • 使用简洁的模板语法把数据渲染到页面上
<br />



我们先写一段简单的代码,如下:



<br />



  
  
  
  Vue基础


  
{{ message }}
此时上面的{{message}},就会被script里的data下的message替换,在页面上正常输出" 你好 www.361way.com! " 。这里我们使用的是div标签,js和页面内容通过id="app"进行链接,其他标签中能不能使用呢?继续往下看。

二、el挂载点

el是element的缩写,el是用来设置Vue实例挂载(管理)的元素。开始之前,我们先看下如下三个问题:



Vue实例的作用范围是什么呢?是否可以使用其他的选择器?是否可以设置其他的dom元素呢?



这里只黏下中间body部分:



<br />

  {{ message }}
  

{{ message }} {{ message }}

可以把中间//注释的部分,分别地行尝试。对比下前三个和第四的输出,会发现有如下区别:



<img src="https://www.361way.com/wp-content/uploads/2019/06/vue-el.png" width="800" height="163" title="vue-el" alt="vue-el" />



通过上面的测试可以发现上面的三个问题,对应的解答结果如下:



<br />
  • Vue会管理el选项命中的元素及其内部的后代元素
  • 可以使用其他的选择器,但是建议使用ID选择器
  • 可以使用其他的双标签,不能使用HTMLBODY
<br />

三、vue data数据

Vue中用到的数据定义在data中,data中可以写复杂类型的数据,渲染复杂类型数据时,遵守js的语法即可。这里也只列下body部分:



<br />

    
{{ message }}

{{ school.site }} {{ school.email }}

  • {{ campus[0] }}
  • {{ campus[3] }}
具体效果如下:



<img src="https://www.361way.com/wp-content/uploads/2019/06/vuedata.png" width="413" height="138" title="vuedata" alt="vuedata" />

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注