Vue框架简单入门

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 的核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，

Vue 也完全能够为复杂的单页应用提供驱动。

Vue项目开始之前要把相关的插件跟问价导入进来,引用文件的时候还要注意路径的问题,项目中如果遇到了404,那就是文件的路径引用不对,或者是项目配置的时候路径没配置好

Vue常见指令

属性

{{}}

vue一直解析数据的指令

v-bind

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

v-bind: 表示通知vue在渲染的 DOM 标签时，将bind绑定的属性 和 Vue 实例data中同名属性值保持一致,在引用的时候可以直接使用" : "也可以

<div id="app">
    <span v-bind:title="title">{{message}}</span>

</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            title : '咋滴'
        }
    })
</script>

v-model

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

功能与v-bind类似， 不过数据可同步改动

<div id="app">
    <input v-model:value="message" name="name" type="text">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            title : '咋滴'
        }
    })
</script>

v-html

{{属性}} 会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令

<div id="app1">
    <input v-model:value="message" name="name" type="text">
    {{message}}
</div>
<div id="app"   >
    <div v-html="input"></div>
    <div v-html="app"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            title : '咋滴',
            app:"<span style='color: rebeccapurple'>哈哈哈</span>",
            input:"<input type='number' name='name' value='33'>"
        }
    })
</script>

v-if

判断指令

<div id="app">
    <span v-if="age<18">18禁</span>
    <span v-else-if="age>18">欢迎光临</span>
    <span v-else="age==18">刚刚好</span>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            age : '11'

        }
    })
</script>

v-for&vue事件

<div id="app">
    <!--事件
    1.事件源
    2.事件函数
    3.事件对象
    4.事件对象参数-->
    <ul>
        <li v-for="item in arr" v-on:click="me($event,item)">{{item.name}}--{{item.age}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            age : '11',
            arr:[{id:1,name:"Alex",age:12},
                {id:2,name:"jack",age:13},
                {id:3,name:"ben",age:14}]
        },
        methods:{
            me:function (e,item) {
                // alert("被点击")
                console.log(e);//事件对象
                console.log(e.target);//事件源
                console.log(item.name);//事件参数
            }
        }
    })
</script>

v-on

事件绑定指令， 可缩写成@

比如：

v-on:click //绑定点击事件，

@click

<form id="formId">
    <input type="hidden" name="id">
    名称：<input type="text" name="name"><br>
    年龄：<input type="text" name="age"><br>
    <input type="button" id="btn" @click="submitForm()" value="提交"/>
</form>

<script>

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

       },
       methods : {
           submitForm:function () {
               $.post("",$('#formId').serialize(),function (data) {
                   if (data.code === 200) {
                       window.location.href='index.html';
                   }else {
                       alert(data.msg);
                   }
               })
           }
       }
   });
</script>

Vue的属性

el

用来指示vue编译器从什么地方开始解析 vue的语法

data

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中,s试图里面的数据来源就是data

methods

这个可以说就是方法的集合,上面什么时候需要用到函数方法,就需要在这里面去调用

    <input type="button" id="btn" @click="submitForm()" value="提交"/>
<script>
   var app = new Vue({
       el:"#formId",
       data : {  },
       methods : {
           submitForm:function () {
               $.post("",$('#formId').serialize(),function (data) {
                   if (data.code === 200) {
                       window.location.href='index.html';
                   }else {
                       alert(data.msg);
                   }
               })
           }
       }
   });

mounted

这个是一个函数**， 在vue实例创建完成后被立即调用（html加载完成后执行）,

filters

vue过滤器集合

<div id="app">
    <ul>
        <li v-for="item in emp">{{item.name}}--{{item.id}}--{{item.sex | sexChange}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            emp:[{id:1,name:"hhh",sex:0},
                {id:2,name:"hhh",sex:1},
                {id:3,name:"hhh",sex:3}]
        },
        filters: {
            sexChange: function (value) {
                if (value == 0) {
                    return "女";
                } else if (value == 1) {
                    return "男";
                } else {
                    return "保密";
                }
            }
        }
    });
</script>

Vue生命周期

请求跨域

同部请求异步请求

Vue注意事项

标签内调用任何属性data里面的属性时候,可以直接使用属性名字即可,如果是地址类型的属性字符串需要用单引号引起来,然后加上数据

返回数据,前端有没有判断返回值code