vue基础

一、基础语法

用vue首先下载vue,可到官网下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--模板语法-->
    <h2>{{ mag }}</h2>
    <h2 style="color: red">{{ person }}</h2>
    <h3>{{ person.name }}</h3>
    <h3 style="color: blue">{{ mag2 }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {'name':'alex'} }}</h4>
    <h2>{{ 1>2? '真的': '假的' }}</h2>
    <!--渲染标签要用到系统指令-->
    <div>{{ text }}</div>
    <div v-html="text"></div>
</div>
<!--1,引vue-->
<script src="vue.js"></script>
<script>
    // 2实例化对象
    new Vue({
        //当前对象绑定的根元素
        el:"#app",
    //    数据属性
        data:{
            mag:"我是mag",
            person:{
                name:"zwq"
            },
            mag2:"hello vue",
        //    标签数据
            text:'<h2>yuan</h2>'
        }
    })

</script>
</body>
</html>

二、指令系统

//常用
v-text   将数据解释为普通文本
v-html   可以输出真正的 HTML 标签也可以将数据解释为文本
v-if    “真正”的条件渲染
v-show   基于 CSS 进行切换,display:none。
v-for //保存数组或者对象 格式 用v-for要 用key绑定一个唯一值如 :key= index v-for = '(item,index) in menuList' v-for = '(value,key) in object' //item指的是数组中每项元素
v-bind 可以绑定标签中任何属性 简写:v-bind:src 等价于 :src
v-on 可以监听js中所有事件 简写:v-on:click 等价于 @click
表单输入绑定 v-model 双向数据绑定 可以用 v-model 指令在表单
<input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-if与v-show的区别

v-if 是“真正”的条件渲染,在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

三、组件的使用

全局组件的使用

Vue.component('全局组件的名字',
{ 根new Vue() 实例化对象中的options是一样,但是要注意: 不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {} })
<slot> 元素作为承载分发内容的出口 <slot></slot> slot是vue中提供的内置组件它会去分发 内容 template:` <button><slot></slot></button>` }) ​

局部组件的使用

//1.声名组件
var App = {
 tempalte:`
   <div class='app'></div>`
};


new Vue({
 el:"#app",
 //3.用组件  
 template:<App />
 //2.挂载组件
 components:{
    App
 }

})

组件的数据传递

(1)父组件向子组件传递数据:通过Prop

1.在子组件中通过props声明需要传递的数据。props:['自定义的属性1','自定义属性2'];
当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样
2.在父组件的子组件中自定义属性。<Vheader :title = '父组件中data声明的数据属性'/>
​ 注意:一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。

(2)子==》父

1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit('自定义的事件名','传递的数据'),来向父级组件触发一个自定义的事件.
2.在父组件中的子组件标签中 要绑定自定义的事件,

(3)平行组件传值(借助一个空对象进行组件间传值)

使用$on()和$emit() 绑定的是同一个实例化对象
A===>B组件传值
1、A组件中使用$emit('事件的名字',值) 抛出事件
2、B组件中要使用$on(‘事件的名字’,function(){})  
vm.$on() 监听当前实例上的自定义事件,事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 
<div id="app">
    <!--使用组件-->
    <my-acom></my-acom>
    <hr>
    <my-bcom></my-bcom>
</div>

<script src="vue.js"></script>
<script>
    // 借助一个空的Vue对象实现组件间通信
    let bus = new Vue();

    //组件A
    let A = {
        template:`
            <div>
                <h1>这是 子组件: A </h1>
                <p>A被选中的次数:{{ num }}</p>
            </div>
            `,
        data(){
            return {
                num: 0
            }
        },
        // 生命周期钩子函数
        mounted(){
            // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件
            // $on() 监听当前实例上的自定义事件,事件可以 由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

            bus.$on('xuanwo', (val)=> {
                // this.num += 1;  // ?
                console.log(val);
                console.log(this);  // this 是组件A
                this.num = val;
            })
        }
    };

    let B = {
         template: `
            <div>
                <h1>这是 子组件:B </h1>
                <button v-on:click="add">选我</button>
            </div>
        `,
        data(){
            return {
                num: 0
            }
        },
        methods:{
            add(){
                this.num += 1;
                // 利用bus对象抛出一个自定义事件 bus.$emit('事件名',数据)

                bus.$emit('xuanwo', this.num);
            }
        }
    };

    // 根实例,挂载组建
    new Vue({
        el: '#app',
         data: {
            totalNum: 0
        },
        components: {
            'my-acom': A,
            'my-bcom':B,
        },
    })
</script>

组件的注意事项:

1. is标识 ==》 table里面只认识tr标签不认识你写的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

   <table>
       <tbody>
            <tr is="my-tr"></tr>
       </tbody>
   </table>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
    // 注册全局组件
    Vue.component('my-tr', {
        template: `<tr v-on:click="add">{{ this.num }}</tr>`,
        data: function () {
            return {
                num: 0
            }
        },
        methods: {
            add() {
                this.num += 1;
            }
        }
    });
    
    let app = new Vue({
        el: '#app',
    })
</script>

</body>
</html>

 

2.组件中的data必须是函数!!!保证每个组件内部的数据都是独立的!

四、过滤器的使用

局部过滤器

//1.注册局部过滤器 在组件对象中定义
filters:{
    '过滤器的名字':function(value){
    }   
}
//2.使用过滤器 使用管道符 | 
{{price  | '过滤器的名字'}}

全局过滤器

// 注册全局的过滤器
//第一个参数是过滤器的名字,第二个参数是执行的操作
Vue.filter('reverse',function(value) {    
    return value.split('').reverse().join('');
});
//使用跟 局部过滤器一样

练习:小清单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小清单</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .done {
            color: green;
        }
        .done1 {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-info">
                <div class="panel-heading">小清单</div>
                <div class="panel-body">
                    <div id="todolist">
                        <!--应用form表单回车也可以提交数据,但要阻止重载页面,提交事件不再重载页面用到时间修饰符prevent-->
                        <form action="" @submit.prevent="add">
                         <div class="input-group">
                            <input v-model="current.title" type="text" class="form-control" placeholder="请输入待办事项..." >
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" @click="add" >
                                    <span class="glyphicon glyphicon-plus"></span>
                                </button>
                            </span>
                        </div><!-- /input-group -->
                        </form>

                        <hr>
                        <ul class="list-group">
                            <li class="list-group-item" v-for="(item, index) in todo" :key="index"
                                :class="{ done1: item.status }"
                                >
                                <span class=" glyphicon glyphicon-ok-sign"
                                      :class="{ done: item.status }"
                                      @click="done(index)"
                                ></span>{{ item.title }}
                                <span class="glyphicon glyphicon-remove-sign pull-right" @click="del(index)"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
    let app= new Vue({
        el: '#todolist',
        data: {
           todo:[
               {"title": '吃饭', 'status': false},
               {"title": '睡觉', 'status': false},
               {"title": '打豆豆', 'status': false},
               {"title": '洗澡', 'status': false},
           ],
            current:{'title':'', 'status':false}
        },
        methods:{
            add(){
                // trim 去掉字符串前后端空格
                if(this.current.title.trim() === ''){
                    return
                }
                this.todo.push(this.current);
                this.current = {'title':'', 'status':false};
            },
            done(index){
                // 完成的事项,图标变绿文本划掉
                this.todo[index].status = true
            },
            del(index){
                // 删除事项 根据索引删除splice(起始索引, 删除数据的个数 )
                this.todo.splice(index, 1)
            }
        }
    })
</script>
</body>
</html>
View Code

 

posted @ 2018-12-29 17:00  清风_Z  阅读(227)  评论(0编辑  收藏  举报