Vue入门精华-1

Vue实例

<body >
    <div id="index" style="padding-left: 200px"></div>
</body>
<script>
    var index = new Vue({
        el :'#index'
    })
</script>

上面就是一个最基础的Vue实例，你大概可以理解为 id 为“index”的元素下的所有内容，这块可以理解为一个作用域，都交给 Vue 去处理。

那么，把创建实例的这部分代码拿出来讲解一下：

<script>
    var index = new Vue({
        el :'#index'    //el 选项是为了挂载元素
        data : {}    //data选项是初始化数据用的，同样也是作为页面加载时候请求后端的数据
    })
</script>

剩下的讲起来还是比较费劲的，可以去看一下官网的api文档，讲的还是很详细的。

我发现那些基础的讲起来比较费劲，好吧，我确实词比较穷，基础指令这些就不再细讲了，来上一些比较实用的吧。

Vue数组方法

1. push() : 往数组的结尾添加
2. unshift() : 往数组的开头添加
3. reverse() : 颠倒数组的顺序
4. shift() : 删除数组开头的项目
5. pop() : 删除数组结尾的项目
6. splice(startIndex,num,item) : 
    startIndex : 开始的索引；
    num : 影响的数据，来判定是添加还是修改；
    item : 要添加或者修改的对象；
    比如 ： arr.splice(1,0,item) : 是要在arr索引为1的位置添加Item项目，之前在1位置的项目会后移；
        arr.plice(1,1,item) : 是要修改索引为1的项目，变成item;

键盘事件

开发的时候一般为了友好的体验，会使用键盘事件来代替一些鼠标点击事件，来看看Vue中的写法；

 <input type="text" v-on:keyup.13="toDoSomething"/>
 <input type="text" v-on:keyup.enter="toDoSomething"/>

v-bind:value 与 v-model

<body >
    <div id="index" style="padding-left: 200px">
        <input type="text" v-bind:value = 'message'/>
        <span>{{message}}</span>
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            message : 'Hello Vue!'
        }
    })
</script>

//上面这种写法，修改input中的值，span中的message并不会实时的改变。

<body >
    <div id="index" style="padding-left: 200px">
        <input type="text"
                v-bind:value = 'message'
                v-on:input = 'message = $event.target.value'/>
        <span>{{message}}</span>
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            message : 'Hello Vue!'
        }
    })
</script>
//这种写法，改变input的值，span中的message会实时改变

?上面这种用法还有一种语法糖，就是v-model

<body >
    <div id="index" style="padding-left: 200px">
        <input type="text" v-model="message"/>
        <span>{{message}}</span>
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            message : 'Hello Vue!'
        }
    })
</script>
//这个和第二种写法效果是一样的

既然都说到这里了，来看一下v-model在表单中的更多的用法：

单个checked，当复选框选中与不选中时，message的值会实时改变

<body >
    <div id="index" style="padding-left: 200px">
       <input type="checkbox" v-model="message"/> {{message}}
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            message : true
        }
    })
</script>

当时一组checked的时候，message初始化定义成一个空数组，会实时存储被选中复选框的value值

<body >
    <div id="index" style="padding-left: 200px">
        <input type="checkbox" value="hello vue" v-model="message"/> hello vue
        <input type="checkbox" value="hello angular" v-model="message"/> hello angular
        <input type="checkbox" value="hello node" v-model="message"/>   hello node
        <br>
        <span>{{message}}</span>
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            message : []
        }
    })
</script>

当是一组radio的时候，初始化可以定义为空字符串，会实时存储被选中的radio的value值

<body >
    <div id="index" style="padding-left: 200px">
        <input type="radio" value="hello vue" v-model="message"/> hello vue
        <input type="radio" value="hello angular" v-model="message"/> hello angular
        <input type="radio" value="hello node" v-model="message"/>   hello node
        <br>
        <span>{{message}}</span>
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            message : ''
        }
    })
</script>

当时一组select框的时候，v-model绑定在select上，会实时更新被选中的option的value值

<body >
    <div id="index" style="padding-left: 200px">
        <select v-model="selected">
            <option v-for="option in options"
                    :value = "option.value">{{option.value}}</option>
        </select>
        <span>{{selected}}</span>
    </div>
</body>
<script>
    var index = new Vue({
        el :'#index',
        data : {
            selected : '',
            options : [{
                'value' : 'hello vue'
            },{
                'value' : 'hello angular'
            },{
                'value' : 'hello options'
            }]
        }
    })
</script>

Vue入门精华-1

Vue实例

Vue数组方法

键盘事件

v-bind:value 与 v-model

Madman

引用和评论

Vue.js-Vue实例

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包

更强大、更灵活！ defineModel 重新定义双向绑定

7天撸完KTV点歌系统,含后台管理系统(完整版)

vue3使用百度地图

你好，我是冴羽，我写了一套《前端大佬成长之路》