- 首先打开Vue官网，找到学习--教程--起步
有2种引入方式,第二种是生产环境版本，是压缩版的，一般使用第一种
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 引入
1.打开开发者工具引入,需要写个容器给他 <div id="app"> </div>
<body>
<div id="app"> </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
- el: 代表容器及app这个div中的内容全部需经过Vue渲染后显示
let vm = new Vue({
el:"#app"
})
- 此时页面会输出提示，可以通过以下代码取消提示
Vue.config.devtools = false
Vue.config.productionTip = false
- 应用
<body>
<div id="app">
{{nickName}}
<ul>
<li v-for="(item,i) in arr" >
{{i}}.{{item}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
nickName:'cici',
arr:['aaa','bbb','ccc']
}
},
})
</script>
</body>
- 引用属性的话需要使用v-bind：
<body>
<div id="app">
{{nickName}}
<ul>
<li v-for="(item,i) in arr">
<img v-bind:src="item.src"> //图片路径的src属性使用v-bind：
{{item.name}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.devtools = false
Vue.config.productionTip = false
let vm = new Vue({
el: "#app",
data() {
return {
nickName: 'cici',
arr: [{
name: 'cici',
src: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2371622966,2601378934&fm=26&gp=0.jpg'
}, {
name: 'ace',
src: 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3085187288,3877765212&fm=26&gp=0.jpg'
}, {
name: 'axx',
src: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3113288603,1886563648&fm=26&gp=0.jpg'
}
]
}
},
})
</script>
</body>
- 方法：删除 通过v-on:
<!-- 点击后触发del方法并传入i下标 -->
<button v-on:click="del(i)">删除</button>
methods: {
del(i){
this.arr.splice(i,1) //通过splice方法删除，从i下标开始删除1个
}
}
- 方法： 添加
<fieldset>
<legend>添加</legend>
<div>
<!-- 使框中的图片路径为src，通过v-bind使value的属性为src -->
图片<input type="text" :value="src" @input="setimg">
</div>
<div>
<!-- 使框中昵称为nickName，通过v-bind使value的属性为nickName -->
昵称<input type="text" :value="nickName" @input="setnickName">
<!-- 通过input事件触发setnickName方法，同步框中修改的内容 -->
</div>
<div>
<button @click="add">添加</button>
</div>
</fieldset>
methods: {
del(i) {
this.arr.splice(i, 1)
},
add() {
this.arr.unshift({ //通过unshift方法给arr数组中添加一个对象
src: this.src,
name: this.nickName
})
},
setimg(e) {
//e.target是指当前事件是发生在那个标签之上，之后 this.src = 同步value的内容
this.src = e.target.value
},
setnickName(e) {
this.src = e.target.value
}
}
- 简写
- v-bind：可缩写为：
<img :src="item.src">
- 事件v-on: 可缩写为@
<button @click="del(i)">删除</button>
- 双向绑定，上面添加删除可以直接使用v-model
<div>
图片<input type="text" v-model="src">
</div>
js中的方法也不再需要， v-model中以封装value和input
