vue.js零基础（二）

一.vue的基础知识

1. 组件的定义与使用
   vue文件的组成

   - 模板页面<template>
   - js模块对象<script>
   - 样式<style>
   

   基本使用

   - 引入组件
   - 映射成标签
   - 使用组件标签
   

2. 模块语法
   （1）类似于node中的EJS，可以让HTML页面动态化：大括号表达式、指令是以v开头的自定义标签属性
   （2）双大括号表达式

   		- 语法：{{exp}}
   		- 内部可以是变量、对象调用、表达式
   		- 注意一定是要有结果
   

   （3）强制数据绑定
   （4）绑定事件监听

<template>
    <div>
        <h3>class使用</h3>
        <div :class="oneClass">样式类可以是字符串</div>
        <div :class="{oneClass:true,twoClass:true}">样式类可以是对象</div>
        <div :class="['oneClass','twoClass']">数组</div>
        <div :class="[oneClass,twoClass]">数组可以是数组</div>

        <div :style="backgroundColor:bgColor:bgColor,fontSize:fontSize" style="width：300px;height:300px;">style样式使用</div>
    </div>
</template>
<script>
    export default{
        name:"ClassAndStyle",
        data(){
            return{
                oneClass:'classOne'
                twoClass:'classTwo'
           }
        }
    }   
</script>
<style scoped>
    .classOne{
        font-size: 20px;
        color: rgb(212, 36, 36);
    }
    .classTwo{
        width: 200px;
        height: 200px;
        background-color: aqua;
    }

</style>

8. 条件渲染：
   (1)v-if/v-else/v-else-if
   (2)v-show

<template>
    <div>
        <div v-if="flag">今晚要上课</div>
        <div v-else>今晚不上课</div>
        <button @click="flag=!flag">切换</button>
        <p>---------------------------------</p>
        <div v-show="flag">今晚要上vue</div>
        <div v-show="!flag">今晚不上vue</div>
        <button @click="flag=!flag">切换</button>
    </div>
</template>
<script>
    export default{
        name:"IfAndShow",
        data(){
            return{
                flag:true,
            }
        }
    }   
</script>
<style scoped>
</style>

9. 列表渲染

• （1）数组遍历：v-for="(person,index) in person",{{index}})姓名：{{person.name}}，年龄：{{person.age}},性别：{{person.sex}}
• （2）对象遍历
• （3）为什么要绑定key：给每一个虚拟结点给定一个id，更准确和更快速的拿到对应得分vnode结点。key无法复用

<div v-for="(person,index) in person" :key="index"></div>

• (4)过滤遍历
• 5）排序遍历

11. 其它常用和指令和自定义指令
    v-text、v-html、v-show、v-if、v-else、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once

<template>
    <div>
        <p>{{content}}(like iT,IT like)</p>
        <p v-text="content">(like iT,IT like)</p>
        <p v-html="content"></p>//不建议使用，在网站上动态渲染任何HTML可能会收到xss的袭击

        <p v-pre>{{intro}}</p>//不要寻软
        <p v-cloak>{{message}}</p>
        <p v-once>{{name}}</p>
        <p v-once>{{name}}</p>//只渲染匀速和组件一次，随后的重新渲染
        <input type="text" placeholder="请输入姓名" v-model="name">
        <p ref="fish">我是一只鱼</p>
        <button @click>输出内容</button>
    </div>
</template>
<script>
    export default{
        name:"OtherInstruct",
        data(){
            return{
                content:'<a href="http://www.baidu.com">师范学院</a>',
                intro:'Like It'，
                message:'自动打开下一课时',
                name:'小刘'
            }
        },
        methods{
            log(){
                //console.log(this.$refs.fish);
                console.log(this.$refs.fish.innerHtml);

            }
        }
    }   
</script>
<style scoped>
[v-cloak]{
	display:none;
}
</style>

自定义指令

-  自定义全局指令：

Vue.directive（id:'upper-word',definiton:(el,binding)=>{
console.log(el,binding);
el.textContent=bindign.value.toUpperCase();
}）//（注册全局指令）

-  自定义局部指令:直接在methods中directive{}（凡是指令都要加v-）