vue基础

1.完整的vue程序段：

a.定义view;

b.定义model

c.创建vue实例

d.创建vue实例时需要传入选项对象，选项对象包括，挂载元素、数据、数组、函数等，选项对象有el属性、data属性、method属性等。

2.vue指令：vue指令作用于HTML元素。

v-if指令为条件渲染指令，用于插入或者删除元素：v-if返回布尔值，返回true时，插入该元素，返回为false时，删除该元素。

 v-show指令为条件渲染指令，给绑定的HTML元素添加css样式，返回true时，显示该元素，返回为false时，隐藏该元素。

备注：vue实例可以直接访问定义在data属性里面的值，这是因为每个vue实例都会代理其选项对象里的data属性。

v-for:基于数组渲染一个列表，和javascript循环遍历数据类似。

v-model:实现数据的双向绑定。

v-on：监听一个事件（鼠标点击，鼠标悬浮等），监听到事件后，函数做出相应的反应

v-bind：动态绑定html元素属性的值

v-bind指令可以缩写为冒号，v-on指令可以缩写为@符

3.vue-resouerce

（1）get请求、post请求、jsonp请求

a.get（url，[options]）.then(successCallback)，post(url，[body]，[options]).then(successCallback)，jsonp(url，[options]).then(successCallback)

注：手动发起的post请求， 默认没有表单格式，服务器处理不了

this.$http.post('url'，{}，{emulateJSON:true})，通过{emulateJSON:true}设置的参数为普通表单格式。

4.vue动画

（1）v-enter【这是一个时间点】是（动画）元素进入之前，元素的其实状态，此时还未进入

（2）v-leave-to【这是一个时间点】是动画离开之后，动画离开的终止状态，此时元素动画已经结束。

（3）v-enter-active【入场动画时间段】

（4）v-leave-active【离场动画时间段】

（5）vue动画自定义前缀：transition加name属性。

5.组件

5.1全局组件和局部组件

component注册的组件为全局组件，可以在任意vue实例中调用

components注册的组件为局部组件，局部组件在定义它的Vue中使用

（1）定义全局组件

Vue.component('my-component',{
    template:'<p>这是一个全局组件</p>'
})
var vm=new Vue({
    el:"#app"
})

（2）定义局部组件

<script>
    var vm=new Vue({
        el:"#app",
        components:{
            login:{
                template:'<h3>这是一个私有组件</h3>'
            }
        }
    })
</script>

5.2子组件和父组件

父组件构建子组件，子组件只能在父组件中使用

父组件向子组件传值，通过双向绑定

 

转载于:https://www.cnblogs.com/w-yq/p/10153987.html