type的值
文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
提交 submit
表单的目的：提交信息
插值
文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
<div id="app">
<p>{{ message }}</p>
</div>
--------Html
使用 v-html 指令用于输出 html 代码：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '1241562475869'
}
})
</script>
---------属性
HTML 属性中的值应使用 v-bind 指令。绑定特定的元素
v-bind 指令被用来响应地更新 HTML 属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
use为true的时候才会被用到
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: true
}
});
</script>
</body>
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
|
| new Vue({ el: '#app', data: { url: '菜鸟教程 - 学的不仅是技术，更是梦想！' } }) |
</script>
---------表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
</body>
</html>
--------------指令
指令是带有 v- 前缀的特殊属性。
v-if 指令将根据表达式 的值(true 或 false )来决定是否插入 p 元素。
v-bind 指令被用来响应地更新 HTML 属性：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
v-if和v-else if else语句
v-if为真 时，显示v-if的内容，否则显示v-else的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<div v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message:'杜金隆要好好学前端'
}
})
</script>
</body>
</html>
-----按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
- 点击按钮，弹出对话框并跳转到百度界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>点击按钮</p>
<button v-on:click="message">按钮</button>
</div>
<script>
new Vue({
el : '#app',
methods :{
message: function() {
alert('aa');
window.location.href="https://www.baidu.com";
}
}
})
</script>
</body>
</html>
-----
过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
Vue.js 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
sites是放在data里面的，数组里面每一个都得用{ }括起来
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: '菜鸟教程 - 学的不仅是技术，更是梦想！',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
Vue.js 计算属性
计算属性关键词: computed。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 computed 结果在缓存中。
来自 <Vue.js 计算属性 | 菜鸟教程>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {//和methods差不多，但是computed调用的时候用的是属性，methods用的是方法
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
Vue.js 监听属性
本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script >
var vm = new Vue({
el: '#app',
data: {
counter: 1,
counter: 1
},
watch:{
counter:function(val1,val2){
console.log('val1: '+val1+', val2: '+val2);
this.counter2++;
},
counter2:{
handler:function(val1){
console.log('counter2: '+val1);
},
deep:false,
immediate:true
}
}
});
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
</body>
</html>
Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message1 }}</p>
<input v-model="message1">
<br>
<p>{{ message2 }}</p>
<input v-model="message2">
</div>
<script>
new Vue({
el : "#app",
data:{
message1: '杜金隆真厉害',
message2: '杜金隆大垃圾'
}
})
</script>
</body>
</html>
复选框
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
单选按钮
以下实例中演示了单选按钮的双向数据绑定：
单选按钮
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'Runoob'
}
})
</script>
select 列表
以下实例中演示了下拉列表的双向数据绑定：
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: '' //一个值用' ' 多个值用[ ]
}
})
</script>
组件
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<div id="app">
<dujinlong v-for="item in items" v-bind:du="item">
{{item}}
</dujinlong>
</div>
<script>
//定义一个Vue组件component,注册一个全局组件语法格式如下：
//Vue.component(tagName, options)
Vue.component("dujinlong",{
props: ['du'],
template:'<li>{{du}}</li>'
});
new Vue({
el : "#app",
data:{
items: ["java","linux","前端"]
}
})
</script>
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
