VUE基础篇，小白进门

什么是VUE

 .渐进式框架（MVVM----model-view-viewModel）

.自底向上增量开发

.核心只关注视图层

.便于与第三方库和即有项目整合

.为复杂的单页面应用程序提供驱动

VUE基础

创建vue实例

var vm = new Vue({

    el:'#app'           ----这里是设置挂点

    data:{}              ----这里是设置数据

})

<body>
    <div id="app">
        <p>我是：{{name}}</p>
        <p>今年：{{age}}岁</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'刘备',
            age:'53',
        }
    })
</script>

vue 4个常用选项

filter过滤器，computed计算属性，methods方法，watch观察

<div id="app">
        <p>数字1：{{num1 | toInt}}</p>
        <p>数字2：{{num2 | toInt}}</p>
        <p>总和:{{sum}}</p>
        <p>{{a}}</p>
        <p><button v-on:click="plus">+1</button></p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            num1:23.324,
            num2:76.786,
            a:0
        },
        filters:{
            // ES6
            toInt(value){
                return parseInt(value)
            }
        },
        computed:{
            sum(){
                return this.num1+this.num2
            }
        },
        methods:{
            plus(){
                return this.a++;
            }
        },
        watch:{
            a(){
                console.log(this.a)
            }
        }
    })
</script>

vue的生命周期

beforeCreate 即将创建 ------created创建完毕  -----------beforeMount 即将挂载 ------------mounted挂载完毕 -------------beforeUpdate 渲染之前 --------------updated 渲染之后 ------------beforeDestroy 销毁前 -------------destroyed 销毁后 ----------actived keep-alive组件激活时使用 -------------deactivated keep-alive组件停用时调用

vue在html中绑定数据

Mustache语法也就是{{}}

v-html指令渲染纯html

 <!-- 如果不用v-html那么strong不会被解析 -->
<div id="app" v-html="name"></div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:"<strong>前端开发</strong>"
        }
    })
</script>

v-bind指令动态绑定dom属性的值

<div id="app" >
        <!-- v-bind:disabled可以简写成:disabled -->
        <button :disabled="dis_true">我不能被点击</button>
        <button :disabled="dis_false">我可以被点击</button>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            dis_true:true,
            // 当disabled的值被解析成false时，属性disabled直接被移除掉
            dis_false:false
        }
    })
</script>

vue 10个必须掌握的指令

1.v-text 用于更新标签包含的文本，雷同{{}}

2.v-html 解析纯的html标签

3.v-show 控制元素的显示/隐藏

4.v-if /v-show 频繁切换用v-show,不太可能切换用v-if

5.v-else 鉴由于v-if值为false直接被忽略

6.v-for 渲染数组循环遍历[除数组还可以迭代对象和整数]

7.v-bind 用于动态绑定dom元素属性

8.v-on 相当于绑定事件监听器

9.v-model 帮助我们轻易实现表单控件和数据双向绑定

10.v-once 只渲染一次后，后面数据更新变动都不会重新渲染

vue 组件

<div id="app">
        <!-- my-article为自己定义的组件名，articles为数据存放的数组，props是传递数据detail，把item绑定在detail上 -->
        <my-article v-for="item in articles" v-bind:detail="item" class="useinfo"></my-article>
</div>
<script>
    Vue.component('my-article',{
        props:['detail'],
        template:`<div><div><h1>{{detail.title}}</h1><div><span>{{detail.date}}</span><span v-show="detail.is_original">原创</span></div></div><img :src="detail.cover_url" alt="" /></div>`
    })
    let vm = new Vue({
        el:'#app',
        data:{
            articles:[
            {
                title:"这里是喵星人的天堂",
                date:"2017.6.20",
                is_original:true,
                cover_url:"imges/cat01.jpg"
            },
            {
                title:"这里是喵星人的天堂",
                date:"2017.6.20",
                is_original:true,
                cover_url:"imges/cat02.jpg"
            },
            {
                title:"这里是喵星人的天堂",
                date:"2017.6.20",
                is_original:true,
                cover_url:"imges/cat03.jpg"
            },
            {
                title:"这里是喵星人的天堂",
                date:"2017.6.20",
                is_original:true,
                cover_url:"imges/cat04.jpg"
            }
            ]
        }
    })
</script>

vue组件之间的通信(父---->子)

<div id="app">
        <son :message="msg"></son>
</div>
<script>
Vue.component('son',{
        props:['message'],
        template:`<div>{{message}}</div>`
    })
    const app =new Vue({
        el:'#app',
        data:{
            msg:'我是父组件的数据'
        }
    })
</script>

vue组件之间通信（子----->父）

<div id="app">
        <son @connect="say"></son>
</div>
<script>
    Vue.component('son',{
        template:`<button @click="send">点击</button>`,
        data(){
            return{
                msg:'大家好，我是子组件的数据'
            }
        },
        methods:{
            send(){
                this.$emit('connect',this.msg)
            }
        }
    })
    const app = new Vue({
        el:'#app',
        methods:{
            say(msg){
                console.log(msg)
            }
        }
    })
</script>

vue 动态绑定class与style

<div id="app2">
        <p :class="{'active':isActive,'danger':isDanger,'error':isError}">
        这里是绑定Class
        </p>
</div>
<div id="app3">
        <p :class="[activeClass,errorClass]" :style="{color: colorStyle}">
            这里是数组语法
        </p>
</div>
<script>
    const vm=new Vue({
        el:'#app2',
        data:{
           isActive:true,
           isDanger:true,
           isError:false
        }
    })
    let vm2 = new Vue({
        el:'#app3',
        data:{
            activeClass:'active',
            errorClass:'error',
            colorStyle:'red'
        }
    })
    
</script>

目前基础知识了解了这些，接下来会进行实践操作编写小demo来提升对vue的理解！！

posted @ 2017-06-20 15:48  StrugglingSnail  阅读(153)  评论(0)    收藏  举报