vue

vue

vue与jquery相似在使用之前需要将文件将文件的路径在script中设置好.

<!-- 视图, 是由两个{{}}占位，到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">
    <p>{{nameReverse}}</p>
    <p>{{age+1}}</p>//这里可以直接进行运算
    <div>
        <span>{{sex}}</span>
    </div>
</div>



<script>
    // 每个页面要创建一个Vue对象（实例）
    var vue = new Vue({
        // 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
        data: {
            name: "hello, world",
            age: 18,
            sex: "男"
        },
        // el 对应的dom元素，把数据和视图结合在一起
        el:"#app",
        computed: {
            /* 计算属性，对应一个函数，由普通属性计算而来 */
            nameReverse : function(){
                // this 代表vue对象
                return this.name.split("").reverse().join("");//对文本进行截取split("")是将字符以每个字母截取
//后进行倒叙  join("")以空字符进行拼接
            }
        }
    });
</script>

el:是固定格式后面对应dom元素的id
data: 里面存储模型数据 可以有多个属性
虽然上面说可以直接在模型上进行但是并不利于直观的观看, 可以在下面 computed 中进行计算

上面是简单格式 如何直接输出一个表格
以商品展示表格为例

<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>

    <table border="1" width="100%" v-show="list.length>0">
        <tbody>
            <!-- p代表数组中第i个元素，i是下标值-->
//当然这块是一个点  最重要的如何想的到 将tr td 合理的分配好位置  思想很重要  我没有想到
            <tr v-for="(p,i) in list">
                <td>{{i+1}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <!-- {{}} 语法只能用来占位内容，不能作为标签的属性(特性)
                    要绑定标签的属性，需要使用 v-bind:属性名="变量"

                    简化写法(省略了v-bind)：
                    :属性名="变量"
                 -->
                <td><img width="110" v-bind:src=" 'images/' + p.img" :title="p.title"></td>
                <td><img width="110" :src=" 'images/' + p.img"></td>
            </tr>
        </tbody>
    </table>
</div>

<script>

这个表使用 的v-show 通过浏览器的控制台 vue.list.pop 进行输出表格时只能将表中内容删除
v-if 则可以在删除完表中数据是会将表删除

 data:{
            list:[
                {name:"商品1", price:3000.00, img:"图片",title:"提示1!!!!!!!!!!!!!!"},
                {name:"商品2", price:4000.00, img:"图片",title:"提示2!!!!!!!!!!!!!!"},
                {name:"商品3", price:2000.00, img:"图片",title:"提示3!!!!!!!!!!!!!!"}
            ]
        }

如果是是要直接输出表下面这个data中的内容结果就得变
title 是鼠标移动到图片是会有一个简短的介绍

vue中的事件
格式： v-on:事件名
简化写法： @事件名
还可以实现参数传递

<input type="button" value="点击" v-on:click="click">
//这块实现一个简单的单击事件 

var vue = new Vue({
        el:"#app",
        data: {

        },
        methods: {//这个是函数
            abc: function(i){
                console.log("点击了按钮", i);
            }
        }
    });

当然还有光标移入移出 键盘按入 抬起时间
对函数内容 名字进行更换就行 方法都是一样
在vue对象初始化完毕后，会调用 mounted 函数 这个适用于在开始就与要执行的事件.