Vue的基本认识与使用

什么是Vue？

Vue是一个渐进式的js框架，采用的是MVVM模式的双向绑定，

Vue的使用

引入vue
        <script src="vuejs/vue.js"></script>
        1.1 路径(相对路径)
        1.2 vue.js[开发版,可以看源码]/vue.min.js[体积小,加载速度快]
    2.准备vue的工作台(挂载点)
        <div id="app"> {{message}} {{say()}}</div>
    3.准备数据(创建vue对象)
        3.1 el:元素的挂载(id,class,标签：建议使用id),只有挂载的元素才能使用表达式这些
        3.2 data:数据(vue对象的所有数据都写在这里)
        3.3 methods:vue对象的方法(可以有多个)
                this指的就是这个vue对象,js与表达式中都可以调用这个方法
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好啊"
            },
            methods:{
                say(){
                    return this.message+",xxxx";
                }
            }
        })

Vue双向绑定

双向绑定就是指，当view中的值发生 变化时通过监听到后会将model中的值也做出同样的改变，当model中的值发生改变时通过绑定数据，也会u改变view中的值

Vue表达式

Vue的表达式和js中的 表达式写法和用法差不多

Vue指令

v-text:直接展示
    v-html:直接展示(但是可以解析html标签)
    v-for:循环(数组,对象,数字,字符串)
        v:值 i:下标 k:属性名
        v-for="(v,i) in 数组"
        v-for="(v,k,i) in 对象"
    v-show:将数据给隐藏掉，
    v-if:判断条件是否成立，当不成立时那么代码将被隐藏掉
        v-else-if=""
        v-else
    v-bind:绑定属性(属性中使用vue的表达式)
        标准写法: <img v-bind:src="src" />
        简写形式(建议): <img :src="src" />
        绑定对象属性: <img v-bind="img" />

 <div id="sh">
         <!--
         bind就是将标签中的属性赋值从Vue中取值出来进行绑定
         有三种方法，第一种
         <img v-bind:src="src">
         第二种 <img :src="src">
         第三种  <img v-bind="img" >这个方式就是将数据种所有信息全部读取出来
         -->
         <img :src="src" :alt="alt">

 </div>

 </body>
 <script>
     new Vue({
         el:"#sh",
         data:{
            src:"/ind/a.jpg",
             alt:"没有图片"
         }
     })

for循环和bing组合案例

<div id="aa">
    <table border="1px">
    <tr v-for="u in user">
        <td>{{u.id}}</td>
        <td>{{u.name}}</td>
        <td>{{u.age}}</td>
        <td>{{u.sex? "男":"女"}}</td>
        <td>{{u.dept.name}}</td>
    </tr>
    </table>
        <!--for循环遍历这个数组-->
    <ul v-for="h in hobby">
        <li>{{h}}</li>
    </ul>
</div>

</body>
<script>
    new Vue({
        el:"#aa",
        data:{

            user:[
                {id:1,name:"燕人张飞",age:30,sex:true,dept:{name:"蜀"}},
                {id:2,name:"常山子龙",age:24,sex:true,dept:{name:"蜀"}},
                {id:3,name:"枭雄曹操",age:18,sex:true,dept:{name:"魏"}},

            ],
            hobby:["一尺","一桌","一堂木而"]
        }
    })

v-model:双向绑定(只能用到input,select,textarea中)
    v-on:事件绑定
        <input type="button" v-on:click="say()" />
        <input type="button" v-on:click="say" />
        简写形式:
        <input type="button" @click="say" />

组件(自定义标签)

注意事项

　　1.先定义组件，再挂载
   　 2.组件的模板必需要一个根标签
    3.命名如果是驼峰(建议小写) myTag -> <my-tag>
    全局组件:
         Vue.component("mytag",{
            //组合的模板
            template:"<h1>假如有一千句html</h1>"
        })
    局部组件：
         new Vue({
            el:"#app",
            //组件(多个)
            components:{
                mytag:{
                    template:"<h2>我是局部组件</h2>"
                }
            }
        })