Vue初步学习一
Vue学习-01.基础数据绑定
1. html 页面代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<div>
名字<input type="text" v-model="name">
<span v-show="name">你的名字是: {{name}}span>
div>
<div>
年龄<input type="text" v-model="age">
<span v-show="age">你的年龄是: {{age}}span>
div>
<div>
性别<input type="text" v-model="sex">
<span v-show="sex" >你的性别是: {{sex}}span>
div>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js代码
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
name: null,
age: null,
sex: null
}
});3. 效果图
Vue学习-02.v-for指令(数据迭代)
1. html 页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>v-for迭代指令h2>
<ul>
<li v-for="food in foodList">{{food.name}}:￥{{food.discount ? food.price * food.discount : food.price}}li>
ul>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2.js 代码
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
foodList: [
{
name: '葱',
price: 10,
discount: .2,
},
{
name: '姜',
price: 12,
discount: .5,
},
{
name: '蒜',
price: 5
}
]
}
});3. 效果图
Vue学习-03.v-bind指令(属性)
1. html 页面
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>v-bindh2>
<a v-bind:href="url">点我a>
<a :href="url" :class="">点我a>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: {
url: "http://www.baidu.com"
}
});3. 效果
点击跳转百度
Vue学习-04.v-on指令(事件)
1. html 页面
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>v-onh2>
<button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick(1)">点我button>
<form @submit.prevent="onSubmit()" @keyup.enter="onKeyUp">
<input type="text">
<input type="submit" value="提交">
form>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
},
methods:{ //定义方法
onClick: function (data) {
console.log("click"+data);
},
onEnter: function () {
console.log("enter")
},
onOut:function () {
console.log("out")
},
onSubmit:function () {
console.log("out")
},
onKeyUp:function () {
console.log("表单提交")
}
}
});3. 效果图
Vue学习-05.v-model指令及其修饰符(重点)
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>v-modelh2>
名称：<input type="text" v-model.trim="name">
<pre>名称是：{{name}}pre>
价格：<input type="text" v-model.number="price">
<pre>价格是：{{price}}pre>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
name: "洋葱",
price: null,
},
});3. 效果图
Vue学习-06. v-model在其他元素及类型上的用法
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>v-modelh2>
<div>
<label>
男<input type="radio" v-model="sex" value="male">
label>
<label>
女<input type="radio" v-model="sex" value="female">
label>
<br>
性别是{{sex}}
div>
<br>
<div>
<label>
科目一<input type="checkbox" v-model="project" value="one">
label>
<label>
科目二<input type="checkbox" v-model="project" value="two">
label>
<br>
科目是{{project}}
div>
<br>
<div>
<div>你来自哪里？ {{from}}div>
<select v-model="from">
<option value="1">北京option>
<option value="2">上海option>
select>
div>
<br>
<div>
<div>你要去哪里？ {{go}}div>
<select v-model="go" multiple="multiple">
<option value="1">北京option>
<option value="2">上海option>
select>
div>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
sex: "female",
project: ["two"],
from: 2,
go: []
},
});3. 效果图
Vue学习-07.控制流指令
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<div v-if="role == 'admin' || role=='super_admin'">
管理员你好
div>
<div v-else-if="role == 'hr'">
hr你好,代查看简历列表：<br> ...
div>
<div v-else>
你没有权限访问此页面
div>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
role: "super_admin", //改变参数有不同效果
},
});Vue学习-08.计算属性
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<table border="1">
<thead>
<th>学科th>
<th>分数th>
thead>
<tbody>
<tr>
<td>数学td>
<td><input v-model.number="math">td>
tr>
<tr>
<td>物理td>
<td><input v-model.number="physics">td>
tr>
<tr>
<td>英语td>
<td><input v-model.number="english">td>
tr>
<tr>
<td>总分td>
<td>{{sum}}td>
tr>
<tr>
<td>平均分td>
<td>{{avg}}td>
tr>
tbody>
table>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
math: 79,
physics: 98,
english: 88,
},
computed: { //计算属性
sum: function () {
return this.math + this.physics + this.english;
},
avg:function () {
return Math.round(this.sum / 3);
}
}
});3. 效果图
Vue学习-09.全局及局部组件
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="seg1">
<alert>alert>
div>
<div id="seg2">
<alert>alert>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var alert_component = {
template: '',
methods: {
on_click: function () {
alert("弹弹弹")
}
}
}
new Vue({
el: "#seg1",
components : {
alert: alert_component,
}
})3. 效果图
Vue学习-10.配置组件
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.liked{
background-color: cyan;
}
style>
head>
<body>
<div id="app">
<like>like>
div>
<template id="like-component-tpl">
<button :class="{liked: liked}" @click="toggle_like()">
~\(≧▽≦)/~{{like_count}}
button>
template>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var like_component = {
template: '#like-component-tpl', //模板对应id
data: function () {
return{
like_count: 10,
liked: false,
}
},
methods:{
toggle_like: function () {
if(!this.liked)
this.like_count ++;
else
this.like_count --;
this.liked = !this.liked;
}
}
}
new Vue({
el: "#app",
components : {
like: like_component,
}
})3. 效果图
Vue学习-11.父子通信
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<user username="www">user>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
var user_component = {
template: '{{username}}',
props: ['username'],
methods: {
}
}
new Vue({
el: "#app",
components : {
user: user_component,
}
})3. 效果图
Vue学习-12.子父通信
1. html 页面
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<balance>balance>
div>
<script src="../lib/vue.js">script>
<script src="js/01.js">script>
body>
html>2. js 内容
Vue.component('balance', {
template: '3. 效果图
