前文:通过前三天的学习,今天我们开始正式的vue编写,通过学习一下几点:
- .el:载挂点
- data数据对象
- 本地应用
一.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指令 绑定事件 -->
<!-- input 类型为按钮 事件绑定value="事件命名(可自己定义)" -->
<!-- 为了方便可以直接写@而不写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还可以通过静态绑定图标或者图片
<i :class="item.icon"></i>
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">
总结:多加练习就好