我是靠谱客的博主 拉长咖啡豆，最近开发中收集的这篇文章主要介绍Vue2-核心最基本功能介绍hello绑定属性v-ifv-for处理用户输入v-model双向绑定组件化应用构建全部代码，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
文章目录
- hello
- 绑定属性
- v-if
- v-for
- 处理用户输入
- v-model双向绑定
- 组件化应用构建
- 全部代码
hello
一个最简单的helloword
<h1>hello</h1>
<div id="app">
{{ message }}
</div>
// 绑定内容
var app1 = new Vue({
el: "#app",
data: {
message: 'Hello Vue!'
}
});
绑定属性
一个最简单的helloword
<hr>
<h1>绑定属性</h1>
<div id="app-2">
<!--title是span的属性-->
<span v-bind:title="message" v-bind:style="style">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
// 绑定标签的属性
var app2 = new Vue({
el: "#app-2",
data: {
message: "页面加载于 " + new Date().toLocaleString(),
style: "color:red"
}
});
v-if
一个最简单的helloword
<hr>
<h1>v-if</h1>
<div id="app-3">
<input type="button" value="切换" V-on:click="fn"><p v-if="seen">现在你看到了</p>
</div>
var app3 = new Vue({
el: "#app-3",
data: {
seen :true
},
methods: {
fn: function () {
this.seen = !this.seen;
}
}
});
v-for
一个最简单的helloword
<hr>
<h1>v-for</h1>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{ todo.text }}</li>
</ol>
</div>
// v-for
var todos = [
{text: "学习js"},
{text: "学习vue"},
{text: "整个项目"},
];
var app4 = new Vue({
el: "#app-4",
data: {
todos: todos
}
});
处理用户输入
一个最简单的helloword
<hr>
<h1>处理用户输入</h1>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
//处理用户输入,反转message
var app5 = new Vue({
el: "#app-5",
data: {
message: "hello vue.js!"
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});
v-model双向绑定
一个最简单的helloword
<hr>
<h1>v-model双向绑定</h1>
<div id="app-6">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
// v-model双向绑定
var app6 = new Vue({
el:"#app-6",
data: {
message: "hello v-model"
}
});
组件化应用构建
一个最简单的helloword
<hr>
<h1>组件化应用构建</h1>
<p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：</p>
<div id="app-7">
<ol>
<!--创建一个todo-item组件的实例-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
//组件化
//定义一个新组建
Vue.component('todo-item', {
// todo-item组件现在接受一个
// "prop",类似于一个定义attribute
// 这个prop(属性)名为todo
props: ['todo'],
template: '<li class="templateClass">{{ todo.text }}</li>'
});
//现在使用v-bind指令将代办项传到循环输出的每个组件中
var app7 = new Vue({
el: "#app-7",
data: {
groceryList:[
{id:0,text:"蔬菜"},
{id:1,text:"奶酪"},
{id:2,text:"随便其它什么人吃的东西"},
]
}
});
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
<style>
.templateClass {
color: seagreen;
}
.templateClass:hover {
color: dodgerblue;
}
</style>
</head>
<body>
<!--hello-->
<h1>hello</h1>
<div id="app">
{{ message }}
</div>
<!--绑定属性-->
<hr>
<h1>绑定属性</h1>
<div id="app-2">
<!--title是span的属性-->
<span v-bind:title="message" v-bind:style="style">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<!--v-if-->
<hr>
<h1>v-if</h1>
<div id="app-3">
<input type="button" value="切换" V-on:click="fn"><p v-if="seen">现在你看到了</p>
</div>
<!--v-for-->
<hr>
<h1>v-for</h1>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{ todo.text }}</li>
</ol>
</div>
<!--处理用户输入-->
<hr>
<h1>处理用户输入</h1>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<!--v-model双向绑定-->
<hr>
<h1>v-model双向绑定</h1>
<div id="app-6">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
<!--组件化应用构建-->
<hr>
<h1>组件化应用构建</h1>
<p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：</p>
<div id="app-7">
<ol>
<!--创建一个todo-item组件的实例-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
// 绑定内容
var app1 = new Vue({
el: "#app",
data: {
message: 'Hello Vue!'
}
});
// 绑定标签的属性
var app2 = new Vue({
el: "#app-2",
data: {
message: "页面加载于 " + new Date().toLocaleString(),
style: "color:red"
}
});
// v-if
var app3 = new Vue({
el: "#app-3",
data: {
seen :true
},
methods: {
fn: function () {
this.seen = !this.seen;
}
}
});
// v-for
var todos = [
{text: "学习js"},
{text: "学习vue"},
{text: "整个项目"},
];
var app4 = new Vue({
el: "#app-4",
data: {
todos: todos
}
});
//处理用户输入,反转message
var app5 = new Vue({
el: "#app-5",
data: {
message: "hello vue.js!"
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});
// v-model双向绑定
var app6 = new Vue({
el:"#app-6",
data: {
message: "hello v-model"
}
});
//组件化
//定义一个新组建
Vue.component('todo-item', {
// todo-item组件现在接受一个
// "prop",类似于一个定义attribute
// 这个prop(属性)名为todo
props: ['todo'],
template: '<li class="templateClass">{{ todo.text }}</li>'
});
//现在使用v-bind指令将代办项传到循环输出的每个组件中
var app7 = new Vue({
el: "#app-7",
data: {
groceryList:[
{id:0,text:"蔬菜"},
{id:1,text:"奶酪"},
{id:2,text:"随便其它什么人吃的东西"},
]
}
});
</script>
</body>
</html>
最后
以上就是拉长咖啡豆为你收集整理的Vue2-核心最基本功能介绍hello绑定属性v-ifv-for处理用户输入v-model双向绑定组件化应用构建全部代码的全部内容，希望文章能够帮你解决Vue2-核心最基本功能介绍hello绑定属性v-ifv-for处理用户输入v-model双向绑定组件化应用构建全部代码所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复