1.插值表达式{{ }}两个花括弧

2.v-bind ,简写 ： （属性）

3. v-on， 简写 @  （方法）

4.内容渲染指令v-text :覆盖原来指令。

5.mvvm {{ message/capi}} 过滤器本质是一个函数。 filters

6.props 是只读的，不要直接修改。

7.父向子传值------自定义属性。 子向父传值------自定义事件。  

8.兄弟组件数据共享。1.创建eventbus.js    2.数据发送方 调用bus.$emit事件  3.接收方 调用bus.$on 事件

9.双向数据绑定指令  v-model 用在表单上

 

  Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。
 

1.插值表达式

<div id="app">{{username}}</div>

<script>

export default {
data() {
        return {
            username;
        };
    },
}

</script>

2.内容渲染指令

 

 <!--v-text覆盖原来内容--->
   <p v-text='username'>姓名：海生</p>
 <p>{{ info }}</p>
 <p v-html='info'>姓名：海生</p>//可以渲染html样式
 info: '<h4 style="color:red;font-size;blod">欢迎大家学习vue.js!</h4>'
 
3.属性绑定指令
 <!---------:为v-bind简写--------------------------------->
        <hr>
        <input :placeholder="tips">
        <img :src="photo" alt="" style="width: 100px;">
 
data(){
            tips: '请输入姓名',
            photo:'https://cn.vuejs.org/images/logo.svg',
            index: 3
        }
 
4.事件绑定
<div id="app">
        <p>count的值是：{{count}}</p>
        <button v-on:click="add(3)">加3</button>
        <button v-on:click="sub">减1</button>

     <hr>
        <button @click="add(3)">加3</button>
        <button @click="sub">减1</button>
    </div>
 
 data() {
            count: 0
        },
        methods(){

            add(n){
                this.count +=n
            },
            sub(){

                this.count --
            }
        }
 
5.事件对象$event
 
<div id="app">
        <p>count的值是：{{count}}</p>
        <button @click="add(1,$event)">加1</button>
    </div>
 
 data: {
            count: 0
        },
        methods:{

            add(n,e){

                this.count +=n
                if(this.count % 2 === 0){
                   // alert()
                    console.log(e.target.style.backgroudColor)
                    e.target.style.width='100px'
                     e.target.style.backgroudColor='red'

                }else{
                   // alert()
                    console.log(e.target.style.backgroudColor)
                    e.target.style.backgroudColor=''
                }
            },

        }
 
6.条件渲染指令
<div id="app">
        <p v-show="flag">这是一个v-show显示</p>
        <p v-if="flag">这是一个v-if显示</p>
        <hr>
        <div v-if="type == 'A'">优</div>
        <div v-else-if="type==='B'">良</div>
        <div v-else-if="type==='C'">及格</div>
        <div v-else>差</div>
    </div>
 
 data: {
            username: '张三',
            flag :true,
            type:'A'
        }
 
7.循环渲染指令
<tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td><a href="javascript:;" @click="remove(item.id)">删除</a></td>
                </tr>
            </tbody>
 
list:[
               { id: 1, name: '张三',age:100},
               { id: 2, name: '李四',age:100},
               { id: 3, name: '王五',age:100},
               { id: 4, name: '张三',age:100}
           ]
 
8.过滤器的基本使用
//管道符
<div id="app">{{username | capi}}</div>
    <div id="app2">{{username | capi}}</div>
 
第一种：
  Vue.filter('capi',function(str){
           
        const first = str.charAt(0).toUpperCase();
        const other = str.slice(1);
        return first + other + '~~~~~~~~';
       })
 
第二种：
  filters:{
      capi(val){
         const first = val.charAt(0).toUpperCase();
        const other = val.slice(1);
        return first + other ;
            }
        }
 
9.监听器的使用
 <div id="app">
        <input v-model="username" type="text">
    </div>
 
 data: {
            username: ''
        },
        watch:{
            username(newVal,oldVal){
                $.get('https://www.escook.cn/api/finduser/' + newVal,function(result){
                    console.log(result)
                })
                console.log('侦听到了username的变化',newVal,oldVal)
            }
        }
 
10.计算属性
 
 <div id="app">
        <input type="text" v-model='r'>
        <input type="text" v-model='g'>
        <input type="text" v-model='b'>
        <div class ="box" :style="{backgroundColor: rgb}">
            {{rgb}}
        </div>
    </div>
   data: {
           r:0,
           g:0,
           b:0
        },
        computed:{
            rgb (){
                console.log(`rgb(${this.r},${this.g},${this.b})`);
                return `rgb(${this.r},${this.g},${this.b})`
              
            }
        }
 
 
  axios({
    method: 'GET',
    url:'http://www.liulongbin.top:3006/api/getbooks',
    })