前端学习：Vue.js基本使用
Vue教程文档：
https://cn.vuejs.org/v2/guide/
定义
实例： new Vue()
挂载点: el
数据：data
模板: template
方法：methods
计算属性: computed类似 variable = variable()
侦听器: watch 一旦数据变化都会触发
参数：props
组件：components
组件与实例的关系：每一个组件都是一个Vue实例
父组件与子组件交互：
- 父组件通过 属性 传递给子组件参数
- 子组件通过 发布事件
$emit传递给父组件参数，前提是父组件需要先 注册事件
使用
变量使用：使用插值表达式 {{ variable }}
文本替换：v-text="variable"
内容替换：v-html="content"
事件绑定：v-on:click="function" 等价于@click="function"
属性绑定: v-bind:title="variable" 等价于 :title="variable"
双向数据绑定: v-model="variable"
show语句：v-show="bool" 为真时显示
if语句：v-if="bool" 为真时加入dom
for语句：
实例
第一个Vue实例 插值表达式
<div id="hello">{{ hello }}div>
<script>
//Vue实例
new Vue({
el: "#hello",
data: {
hello: "hello world"
}
})
script>
hello world挂载点， 实例， 模板
<div id="root">
div>
<script>
// 实例
new Vue({
el: "#root",
// 模板, 如果实例中没有定义模板，则默认使用挂载点里边的dom元素为模板
template: "hello template {{ msg }}
",
data: {
msg: "this is message",
}
})
script>
hello template this is message文本替换
<div id="text" v-text="number">div>
<script>
new Vue({
el: "#text",
data: {
number: 123456,
}
})
script>
123456内容替换 事件绑定
方法 v-on:等价于@
<div id="html" v-on:click="handleClick" @dblclick="handleDoubleClick" v-html="content">div>
<script>
new Vue({
el: "#html",
data:{
content: "this is content
"
},
methods: {
handleClick: function(){
this.content = " click
"
},
handleDoubleClick: function(){
this.content = "double click
"
}
}
})
script>
this is content属性绑定
使用v-bind之后，相单于一个js表达式 等价于:title
<div id="bind" v-bind:title="'hello ' + title">this is titlediv>
<script>
new Vue({
el:"#bind",
data: {
title: "this is a title"
}
})
script>
this is title双向数据绑定
<div id="db-bind">
<input type="text" v-model="content">
<div>{{ content }}div>
div>
<script>
new Vue({
el:"#db-bind",
data: {
content: "this is data double bind"
}
})
script>
this is data doubldasdase bind
this is data doubldasdase bind计算属性
<div id="computed">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>{{ fullName }}div>
<div>{{ count }}div>
div>
<script>
new Vue({
el:"#computed",
data: {
firstName: "",
lastName: "",
count: 0
},
// 计算属性
computed: {
fullName: function(){
return this.firstName + " " + this.lastName
}
},
// 侦听器, 一旦数据变化都会触发
watch: {
fullName: function(){
this.count ++
}
}
})
script>
v-if v-show v-for
<div id="vif">
<div v-if="show">v-if从dom中移除（适合一次操作）div>
<div v-show="show">v-show从dom中隐藏（适合多次操作）div>
<button @click="handleClick">togglebutton>
<ul>
<li v-for="item of list">{{item}}li>
<li v-for="(item, index) of list" :key="index">{{item}}li>
ul>
div>
<script>
new Vue({
el: "#vif",
data: {
show: true,
list: ["first", "second", "third", "fourth"]
},
methods: {
handleClick: function(){
this.show = !this.show
}
}
})
script>
v-if从dom中移除（适合一次操作）
v-show从dom中隐藏（适合多次操作）
toggle
first
second
third
fourth
first
second
third
fourthTodoList实例
<div id="todolist">
<input type="text" v-model="inputValue">
<button @click="handleSubmit">确定button>
<ul>
<global>global>
<li v-for="(item, index) of list" :key="index">{{ item }}li>
<local>local>
ul>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
todo-item>
ul>
div>
<script>
// 全局组件
Vue.component("global", {
template: "item-global "
})
// 组件与实例的关系：每一个组件都是一个Vue实例,
Vue.component("todo-item", {
props: ["content", "index"], //接收参数，通过属性传递值
template: '{{content}} {{index}} ', //显示
methods: {
handleClick: function(){
this.$emit("delete", this.index) //子组件通过发布和父组件通讯
}
}
})
// 父组件与子组件通讯，交互
// 父组件通过 属性 传递给子组件参数
// 子组件通过 发布事件 传递给父组件参数，前提是父组件需要先 注册事件
// 局部组件
var Local = {
template: "item-local "
}
new Vue({
el:"#todolist",
// 注册局部组件
components: {
"local": Local
},
data:{
inputValue: "",
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue);
this.inputValue = "";
},
handleDelete: function(index){
this.list.splice(index, 1)
}
}
})
script>
确定
item-global
sf
fsdfsdf
item-local
sf 0
fsdfsdf 1