vue学习的第四天——vue基础

前文：通过前三天的学习，今天我们开始正式的vue编写，通过学习一下几点：

1. .el:载挂点
2. data数据对象
3. 本地应用

一.el载挂点

想了解什么是el载挂点先得看清整个程序的结构，首先必须是得有html构成，要是要加上vue就还得加上js。由下图的el为app对应html中div id中的app，说明在这个var定义的app中下的数据data和方法methods只适用于该id为app的div中。

二.data数据对象（data数据对象定义在js中到html中使用）

定义：1.可以直接给message赋值为仓鼠

           2.可以定义一个值附上标签

           3.可以定义一个对象，再给对象的属性再赋上值

           4.可以定义一个数组

           5.可以定义一个对象为true或false  

 使用：

        1.可以在

等标签里加上v-text，v-text属性会在js上被赋值

        2.可以

标签之间通过{{}}去引入js上的值

        3.v-text与v-html的区别为html会引用超链接，text不会

        

            
            
            
广州
 

            
            
广州
 

            
            
{{ message }}广州
  
            {{school.name}} 
            
{{school.phone}}

            
            
{{add[0]}}

            
            
            

            

         

三.本地应用（js中的动作功能实现部分）（methods）

ps：组成部分也是有两部分，一部分是在html中编写触发js的动作，二部分是在js中编写触发了什么动作。

首先介绍下大概的本地应用有哪些，大概怎么使用：

v-text	设置标签的文本值
v-on	为元素绑定事件
v-show	根据表达值真假，切换元素显示或隐藏
v-if	低配版的v-show   不进行了解
v-bind	设置元素的属性（如：src，title，class）
v-for	根据数据生成列表结构
v-model	用于表单数据的双向绑定

1.v-text设置标签的文本值（与data数据对象的html使用一样）

2.v-on为元素绑定事件

{{message2}}




  

3.v-show 根据表达值真假，切换元素显示或隐藏

图片显示 ture为显示图片 false为关闭图片（v-if功能与v-show差不多但是用v-show就肯定不会错）

4.v-bind 设置元素的属性（如：src，title，class）

src加上图片路径

title把鼠标停留在上面可以有提示

class加下面一个active类比如（一个div命名active） 

class还可以通过静态绑定图标或者图片

icon: "el-icon-s-custom"    //这些el-icon-s-custom图标是element内就有的图标​​​​​​​

// v-bind在js的对象
imgsrc:"http://www.canshu.com/images/logo.png",
imgtitle:"仓鼠科技城",
isactive:false

5.v-for根据数据生成列表结构

 理解

v-for指令需要使用 item in items 形式的特殊语法，items 是源数据数组，而 item 是数组元素迭代的别名。当然你也可以用你喜欢的别名。简单来说item是items的别名，index则是数组元素迭代序号从零开始的索引，用作于序列号。

    

      

        {{index+1}}.
        {{item}}
        
      
    

得到页面

 6.v-model表单数据的双向绑定

v-model通过一个inputvalue参数将用户输入的值写入到方法add中，add将传参给list数据

 总结：多加练习就好