一.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.可以定义一个值附上<a>标签

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

4.可以定义一个数组

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

使用：

1.可以在<h2>等标签里加上v-text，v-text属性会在js上被赋值

2.可以<h2>标签之间通过{ {}}去引入js上的值

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

        <div id="app">
            <!-- 本地应用v-text指令 -->
            <!-- 如果使用v-text会清空<h2>里面的内容 -->
            <h2 v-text="message">广州</h2> 

            <!-- 加入表达式使用+'' -->
            <h2 v-text="message +'网络工程'">广州</h2> 

            <!-- 下一条也是v-text但是不会清空<h2>标签原有的内容 -->
            <h2>{
   
   { message }}广州</h2>  
            <span>{
   
   {school.name}}</span> 
            <li>{
   
   {school.phone}}</li>

            <!-- 以数组形式输出 -->
            <li>{
   
   {add[0]}}</li>

            <!-- 本地应用v-html指令 -->
            <!-- 对比v-html与v-text，html会引用超链接，text不会 -->
            <h2 v-html="content"></h2>
            <h2 v-text="content"></h2>
         </div>

三.本地应用（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为元素绑定事件

<!-- v-on拥有的方式有 单击click 双击dbclick monseenter等等方式（鼠标停留等）  -->
<input type="button" value="v-on指令" v-on:click="doit">

<!-- 绑定doit事件（） -->
<input type="button" value="v-on简写" @click="doit">

<!-- 绑定changehamster事件（） -->
<h2 @click="changehamster">{
   
   {message2}}</h2>
<input type="button" value="图片开关" @click="changeisshow">
<input type="button" value="年龄加1" @click="addage">

<!-- keyup为任何按键都会触发sayhello功能，keyup.enter为按回车触发 -->
<input type="text" value="" @keyup.enter="sayhello">  
<input type="button" value="传参" @click="sayhi(666,888)">

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

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

<!-- 当isshow对象的值为ture图片显示，为flase不显示 -->
<img v-show="isshow" src="../代码使用拉出桌面/kao.jpg" alt="">

<!-- 当age大于等于18时为ture图片显示 -->
<!-- 但是age在data的初始值为17，但是由于上面有按钮年龄加一当点击按钮时age加1显示图片 -->
<img v-show="age>=18" src="../代码使用拉出桌面/kao.jpg" alt="">

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

src加上图片路径

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

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

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

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

<img :src="imgsrc" alt="" :title="imgtitle+'!!!'" :class="{active:isactive}" @click="doactive">

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

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

理解<li class="todo" v-for="(item,index) in list">

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

<ul class="todo-list">
    <li class="todo" v-for="(item,index) in list">
      <div class="view">
        <span class="index">{
   
   {index+1}}.</span>
        <label>{
   
   {item}}</label>
        <button class="destroy" @click="remote(index)"></button>
      </div>
    </li>
</ul>

得到页面

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

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

<input v-model="inputvalue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入" class="new=todo">

总结：多加练习就好

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