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>