【vue基础--自学笔记】

vue第一天打卡

---

指令

v-text	填充内容
v-bind	绑定属性
v-model	双向数据绑定
v-html	填充html标签
v-once	限制编译

el和data的两种写法

第一种 el:'#app'    

 第二种   

     // 计时器  第二种写法  把id选择器放在外面  

        setTimeout(() => {

                vm.$mount('#root')

            }, 1000)

            //  el的两种写法用那种都可以

---

data的两种用法

第一种

            data:{

                nanme:'zs'

             }

            // data的函数式写法 ------data

            data: function() {

                console.log(this)

                    // this是vue的实列对象  

                    // data函数不能写成箭头函数

         

---

v-bind  绑定属性的使用

<div id="app">

        <!-- 绑定属性  a  href -->

        <a v-bind:href="url">百度{{name}}</span></a>

        <br>

        <button v-on:click="handel">切换</button>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            name: '百度',

            src: '../img/ch1.jpg',

            data: {

                url: 'http://www.baidu.com'

            },

            methods: {

                handel: function() {

                    this.name = 'vue'

                    this.url = 'http://itcast.cn'

                },

            }

        })

    </script>

---

v-text  使用

    <div id="app">

        <p v-text="masg"></p>

    </div>

    <script>

        // 使用vue必须实列化一个vue

        var vm = new Vue({

            el: '#app',

            data: {

                masg: 'v-text数据填充'

            }

        })

    </script>

---

 v-html

<div id="app">

        <p v-text="masg"></p>

    </div>

    <script>

        // 使用vue必须实列化一个vue  使用的时候慎用 第三方的访问不建议使用  会被攻击

        var vm = new Vue({

            el: '#app',

            data: {

                masg: new Date()

            }

        })

    </script>

---

v-model

<div id="app">

        <form action="">

            <h1 v-text="msg"></h1>

            <!-- 用在表单输入  改变输入的内容会影响 数据的变化 -->

            <input type="text" v-model="msg">

        </form>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                msg: '输入'

            }

        })

---

v-once 

<p v-once>{{masg}}</p>

---

v-pre

<!-- 显示原来的内容  显示 {{masg}}    跳过编译< -->

        <p v-pre>{{masg}}</p>

---

v-for循环

<div id="app">

        <div>

            <ul>

                <!-- item 自己定义的   fre是遍历的数组   index也是自己定义的 索引

                 key为了提高效果  如果有id  v-bind:key="id"

                 v-bind:key="index"  设置成索引也可以  索引也是唯一的  

                -->

                <li v-bind:key="index" v-for="(item ,index) in fre">{{item +'---'+index}}</li>

                <li v-for="it in my">

                    <span>{{it.ename}}</span>

                    <span>--------</span>

                    <span>{{it.cname}}</span>

                    <!-- 数据可以复杂  使用. 去拿值 -->

                </li>

            </ul>

        </div>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                fre: ['aa', 'ccc', 'bbb', 'ee'],

                my: [{

                    ename: 'aa',

                    cname: '1'

                }, {

                    ename: 'ccc',

                    cname: '2'

                }, {

                    ename: 'ee',

                    cname: '3'

                }]

            },

            methods: {

            },

        })

    </script>

---

按键修饰符

   <!-- 按delete键清空 v-on:keyup.delete -->

        用户名<input type="text" v-model="name" v-on:keyup.delete="cl">

按delete可以删除输入的内容

---

事件修饰符

<!-- .prevent 阻止默认行为  事件修饰符

       

        .stop - 阻止冒泡

        .prevent - 阻止默认事件

        .capture - 阻止捕获

        .self - 只监听触发该元素的事件

        .once - 只触发一次

        .left - 左键事件

        .right - 右键事件

        .middle - 中间滚轮事件

       

       比如a标签在没有href的情况下点击会刷新 加上.prevent会阻止a标签的默认行为

---