vue学习记录防止丢失

一、vue基础
1.1.1 创建vue
引入vue.js 的cdn节点

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建一个 id为app的节点

如：

<div id="app"></div>

创建vue实例

<script> let app = new Vue({ el: '#app', data: { msg:'vue' } }) </script>

el 属性指定当前 vue 实例的挂载点
vue实例中的所有数据只能在此dom范围内使用
data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中通过下面方式访问data中数据
2.1 数据绑定
2.1.1 内容绑定
直接在标签内使用{{}}

<div id="app">
        <p>{{msg}}</p>
</div>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                msg:'我是内容绑定'
            }
        })
    </script>

双{{}}只能显示纯文本

如需显示html内容 则需要使用v-html指令

<div id="app">
    <p v-html="msg"></p>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg:'<b>我是内容绑定</b>'
        }
    })
</script>

2.1.2 属性绑定
所谓属性绑定就是把data中的数据作为某个元素的属性值
我们需要使用v-bind:属性名 指令
属性可以是内置的 也可以是自定义的

<p v-bind:id="id">{{id}}</p>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id:11
        }
    })
</script>

v-bind: 可以简写为

<p :id="id">{{id}}</p>

2.1.3 表单控件的值
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素
2.1.3.1 文本框和文本域

<input type="text" v-model="value">
<script>
    let app = new Vue({
        el: '#app',
        data: {
            value:'我是文本框'
        }
    })
</script>

<textarea v-model="textarea"></textarea>
        let app = new Vue({
            el: '#app',
            data: {
                textarea:'我是文本域'
            }
        })

2.1.3.2 复选框
​ 对于复选框来说 v-model 绑定的是checked属性      

 <label for="swip">游泳</label>
        <input type="checkbox" id="swim" v-model="isSwim">
        <label for="read">阅读</label>
        <input type="checkbox" id="read" v-model="isRead">
        <label for="play">游戏</label>
        <input type="checkbox" id="play" v-model="isPlay">

<script>
        let app = new Vue({
            el: '#app',
            data: {
                isSwim:false,
                isRead:false,
                isPlay:true
            }
        })
    </script>

经过实验我们可以得出：当v-model的值为false的时候 复选框是不会选中的

2.1.3.3 单选框

<label for="man">男</label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women">女</label>
<input type="radio" id="women" value="women" v-model="gender">
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                gender:''
            }
        })
    </script>

设置多个单选框的 v-model 为同样的值，就可以省略 name 属性
选择某个单选框后，此单选框的 vlue 属性值会赋值给 gender 属性
设置 gender 属性的值为某个单选框的 value 值，此单选框就会默认选中
2.1.3.4 下拉列表：

<select v-model="city">
            <option value="" disabled selected>请选择</option>
            <option value="bj">北京</option>
            <option value="sjz">石家庄</option>
            <option value="sh">上海</option>
</select>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                city:''
            }
        })
    </script>