Web——Vue入門文法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue title>
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js">script>
head>
<body>
<div id="root1">{{msg}}div>
<script>
// vue
new Vue({
el:"#root1",
data:{
msg:"this is my coat !"
}
})
script>
<div id="root2">
<h1 v-text="text">h1>
<h2 v-html="text">h2>
div>
<script>
new Vue({
el:"#root2",
data:{
text:"yes it is !
"
}
})
script>
<div id="root3" :title="title">
<div @click="myfunction">{{msg}}div>
<input :placeholder="password" type="password" name="pd" v-model="password" />
<p> ：{{password}}p>
div>
<script>
new Vue({
el:"#root3",
data:{
title:" ",
msg:"nice to meet you !",
action:" ：",
password:""
// msg1:password,
},
//
methods:{
myfunction: function() {
this.msg = "nice to meet you too !"
}
}
})
script>
<div id="root4">
<input v-model="firstname"/>
<input v-model="lastname"/>
<div>my name is {{fullname}}div>
<div> ：{{count}}div>
div>
<script>
new Vue({
el: "#root4",
data: {
firstname: '',
lastname: '',
count:0
},
//
computed: {
fullname: function() {
return this.firstname + ' ' + this.lastname
}
},
//
watch: {
fullname:function(){
this.count ++
}
}
})
script>
<div id="root5">
<div v-show="show">hello worlddiv>
<button @click="handleClick">togglebutton>
<ul>
{{item}}li>
ul>
div>
<script>
new Vue({
el: "#root5",
data: {
show: false,
list: ['a','b','c']
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
script>
<div id="root6">
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}} <button @click="removevalue(index)"> button>
li>
<input v-model="inputvalue"/>
<button @click="insertvalue"> button>
ul>
div>
<script>
new Vue({
el: "#root6",
data: {
inputvalue: "",
list: []
},
methods: {
insertvalue: function () {
this.list.push(this.inputvalue)
this.inputvalue = ""
},
removevalue: function (index) {
this.list.splice(index,1)
}
}
})
script>
body>
html>
コンポーネントおよび評価
<html>
<head>
<title>todolist2title>
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js">script>
head>
<body>
<div id="root">
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
>todo-item>
<input v-model="inputvalue"/>
<button @click="insertvalue"> button>
ul>
div>
<script>
// vue
// props
Vue.component("todo-item", {
props: ['content'],
template: "{{content}} "
// vue
// data: {
// },
// methods: {
// }
})
//
// var TodoItem = {
// template: "{{content}} ",
// props: ['content']
// }
new Vue({
el: "#root",
// components: {
// 'todo-item': TodoItem
// },
data: {
inputvalue: "",
list: []
},
// ，
// template: ...
methods: {
insertvalue: function () {
this.list.push(this.inputvalue)
this.inputvalue = ""
},
removevalue: function (index) {
this.list.splice(index,1)
}
}
})
script>
body>
html>
親子コンポーネント
<html>
<head>
<title>todolist3title>
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js">script>
head>
<body>
<div id="root">
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>todo-item>
<input v-model="inputvalue"/>
<button @click="insertvalue"> button>
ul>
div>
<script>
// ， @
Vue.component("todo-item", {
props: ['content','index'],
template: '{{content}} ',
methods: {
handleClick: function(){
this.$emit('delete', this.index)
}
}
})
new Vue({
el: "#root",
data: {
inputvalue: "",
list: []
},
methods: {
insertvalue: function () {
this.list.push(this.inputvalue)
this.inputvalue = ""
},
handleDelete: function(index){
this.list.splice(index,1)
}
}
})
script>
body>
html>