vue第一篇（基础及指令）

1.使用

 1.下载
npm install vue --save：vue核心文件
注意：下面两个不是必须，需要就下载
npm install vue-resource --save：vue资源文件-ajax
npm install vue-router --save：vue路由

 2.页面内使用
<div id="box"></div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
// 实例化Vue对象（可以有多个实例，但是不推荐）
new Vue({
    // 指定Vue作用范围
    el: "#box"
})
</script>

**注意事项：**
1.Vue的内容都必须在在元素（element）属性值表示的标签范围内
2.一个页面中可以有多个vue实例,但是以后网页都是单页面，推荐写一个vue实例
3.不要将元素设置为html和body
4.data中定义变量，先定义，后使用

2.{{}}使用-数据输出

//可使用的格式
{{'hello world'}}：纯字符串
{{4*8}}：数字运算表达式
{{ num }}：变量（数据模型）
{{ num*price }}：变量（数据模型）运算
{{ boolean ? 'yes' : 'no' }}：三元运算符
{{data.join('->')}}：数组拼接 data=[1,2,3,4] 1->2->3->4
{{ msg.split('').reverse().join('') }}：字符串反转处理

//{{}}内不能写的内容
            1.if语句
            2.for语句
            3.function
            4.switch..
// JS代码
new Vue({
    el:"#box",
    data:{
        msg:"Hello world",
        num:8,
        price:3.99,
        boolean:true,
        data:['zhangsan','lisi','wangwu'],
        username:"小红",
        content:"我是<span>小红</span>",
        img:"images/1.jpg",
        href:"http://www.sex.com",
        title:"这是真的网站",
    }
})

2.指令

2.1 v-model:表单控件绑定

<input type="text" v-model="username" value="">
// v-model定义的message模型改变，input内的{{message}}同步更新
//v-model="username":让下面data中的username和当前的input标签元素就绑定在一起

2.2 v-text:绑定文本,v-html, v-once

<span v-text="msg"></span> 等价于 <span>{{msg}}</span>
//v-text:直接覆盖标签内容，重新设置标签的内容
<h3 v-text="username">用户名是：</h3> //结果：小红
<h3 v-text="'用户名是:'+username"></h3> //结果：用户名是：小红

//v-html:解析内容中的标签
<h3 v-html="content"></h3>
//v-once:只改变一次
<h3 v-once>{{username}}</h3>

2.3 v-bind：绑定属性，v-bind可以省略

//下面写法 img数据不能解析
<img src="{{img}}">

//v-bind:src:绑定img的值与src一致
<img v-bind:src="img" alt="" width="300">
<a v-bind:href="href" v-bind:title="title">全球最大的社区</a>
<img :src="img" alt="" width="300">  //省略v-bind
<a :href="href" :title="title">全国最大的社区</a>

// button按钮
<button v-bind:disabled="true">Button</button>：不可以点击
<button v-bind:disabled="false">Button</button>：可以点击

//disabled:禁用,不能修改 - 传不到服务器
//readonly:只读,不能修改 - 可以传送到服务器
<input type="text" name="username" value="123456" readonly> //readonly="false" 可读可写
<input type="text" name="username" value="123456" disabled> //disabled="false" 可读可写

//单选框--
<input type="checkbox" name="" :checked="true">吃  //:checked="具体的布尔值":表示选中和不选中
<input type="checkbox" name="" :checked="false">喝
<input type="checkbox" name="" :checked="isTrue">玩 //:checked="变量值"：变量值为真，则选中，

<button @click="isTrue = false">点击不选中</button>
<button @click="isTrue = true">点击选中</button>
<button @click="isTrue = !isTrue">切换选中状态</button>

// 绑定自定义的数据 data属性,像data-id=" "
<h3 v-bind:data="msg">绑定自定义属性-绑定模型</h3>

// v-bind内容做字符串和变量值拼接
<div v-bind:title="'list-'+id"></div>

new Vue({
            el:"#container",
            data:{
                isTrue:true,
                msg:"这是一个自定义的数据"
            }
        })

2.4 v-if，v-show

// v-if="变量值"
变量值为真：显示标签元素，变量值为假：不显示标签， 
<h3 v-if="isShow">显示还是不显示</h3> // isShow为true，显示
<button @click="isShow=！isShow">点击切换显示与不显示</button>

//v-show="变量值"
变量值为假，则设置该元素的display属性为none，为真，正常展示
<h3 v-show="isShow">能不能显示出来</h3>

// template:模板-views
<template v-if="ok">
  <h1>Title</h1>
</template>

2.5 v-for

//遍历数组
//arrs这个是数据，必须和data中的arrs保持一致,arr是自定义的
<li v-for="arr in arrs">{{arr}}</li>

//数组遍历对象
//循环展示所有的商品(shop,index) index表示的当前数组元素的索引值
<tr v-for="(shop,index) in shoplist">
    <td>{{shop.id}}---{{index}}</td>
    <td>{{shop.title}}</td>
    <td>{{shop.price}}</td>
</tr>

// 普通0-10循环
<span v-for="n in 10">{{ n }}</span>
new Vue({
        el:"#container",
        data:{
            arrs:['唐僧','孙悟空','八戒','沙僧','白龙马'],
            shoplist:[
                {id:1,title:"戴尔电脑",price:3999},
                {id:2,title:"惠普电脑",price:3999},]
        }
    });

2.6 绑定事件:v-on

// v-on:事件名：绑定事件  事件名可以不加括号
<button v-on:click="alert('ok')">点击</button>
<button v-on:click="fun()">点击执行fun函数</button>
<button v-on:dblclick="fun()">双击执行fun函数</button>
<button v-on:mouseover="fun()">移入执行fun函数</button>

// v-on:click 简写为 @click
<button @click="fun()">事件的简写</button>

//$event:此时是固定的写法，不能改变
<div class="box" @click="getXY($event)"></div>