12、基本语法
动态载入内容{{}}，这个双花括号是一种语法，叫做mustache语法，可以将vue实例里面的数据动态显示
这个就是vue的helloworld
我们看到了双花括号的语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自己</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
},
methods: {
},
created :{
},
computed:{
}
});
</script>
</body>
</html>
浏览器上运行如下
13、插值
v-once |
v-html,v-text
v-pre |
v-cloak
14、动态绑定属性
v-bind
属性有class等等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
color: red;
}
.bbbb{
color: antiquewhite;
}
.div{
width: 500px;
height: 400px;
background-color: tan;
;
}
.div2{
width: 500px;
height: 200px;
background-color: peachpuff;
;
}
</style>
</head>
<body>
<div id="app">
<!--
<h1 :class="{red:true,line:true}">第一名</h1> class绑定了2个，都为true
<h1 :class="{red:true,line:false}">第一名</h1> class绑定了1个，red为true
<button v-on:click="btnclick()">按钮</button> btnclick() 的（）可以省略
-->
<h1 :class="{red:flagg}">第一名</h1>
<h1 :class="red">第二名</h1>
<h1 :class="red">第三名</h1>
<h1 :class="getClass()">国家</h1>
<h1 :class="['aaa','bbb']">我爱吃橘子</h1> <!--这里是常量，加了引号-->
<h1 :class="[aaa,bbb]">我爱吃芒果</h1> <!--这里是变量，来自data里面-->
<button v-on:click="btnclick()">按钮</button>
<div :class="div">
<ul>
<li v-for="(item,index) in fuList" v-on:click="clickco(index)" :class="{red:index === type}">{{item+' '+index}}</li>
</ul>
<!--
<h1 :style="{fontSize:'100px'}">style测试</h1>
fontSize 就是 font-size:100px
-->
<h1 :style="{fontSize:'30px'}">style测试1</h1>
<h1 :style="{fontSize:size}">style测试2</h1>
<h2 :style="{color:color}">style测试3</h2>
</div>
<div :class="div2">
<h2 :style="[astyle,bstyle]">五十六个名族</h2>
<h2 v-on:click="getallname()">获取名字{{allname}}</h2>
<!--
{{}}还可以写方法
-->
<h2 >获取名字2{{getallname()}}</h2>
<!--
用计算属性获取名字
-->
<h2 >获取名字3{{fullname}}</h2>
<!--
计算这些书的总价格
-->
<h2>{{totalPrice}}</h2>
<h2>{{totalPrice2}}</h2>
<!-- 计算属性的get方法 -->
<h2> 计算属性的get方法--{{fullname2}}</h2>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
tid:1,
red:'red',
flagg:false,
aaa:'haha',
bbb:'bbbb',
div:'div',
fuList:['香蕉','苹果','猕猴桃','西瓜'],
type:-1,
size:'20px',
color:'red',
astyle:{color: 'red'},
bstyle:{fontSize:'20px'},
div2:'div2',
first:'张',
last:'三',
allname:null,
books:[
{id: 110,name: '朝花夕拾',author: '鲁迅',price:11},
{id: 111,name: 'vue学习之路必需学的那些',author: '张丹吉',price:21},
{id: 112,name: '富爸爸穷爸爸',author: '外国人',price:41},
{id: 113,name: '半生缘',author: '张爱玲',price:1},
],
},
// computed计算属性
//computed和methods里面都是写方法的，但是computed的方法名字一般不带get这种动词，因为它是计算属性
computed:{
fullname: function(){
return this.first+this.last
},
//计算属性里面有get和set方法
fullname2:{
set: function(){
},
get: function(){
return 'aaa'
}
},
totalPrice: function(){
let result = 0
for(let i = 0;i<this.books.length;i++){
result += this.books[i].price
}
return result
},
//下面这种写法更简单
totalPrice2: function(){
let result = 0
for(let book of this.books){
result += book.price
}
return result
}
},
methods:{
btnclick: function(){
this.flagg = !this.flagg
},
getClass: function(){
return {red:true,line:true}
},
clickco: function(index){
console.log("点击了"+index)
this.type=index
},
getallname: function(){
this.allname=this.first+this.last
console.log(this.allname)
return this.first+this.last
}
}
})
</script>
</body>
</html>
v-bind: = ：
：class就是为元素绑定该class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{fullname}}</h2>
<h2>{{getfullname()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
firstname:'Kobe',
lastname:'Bryan',
},
methods:{
getfullname: function(){
console.log("getfullname")
return this.firstname+" "+this.lastname
},
},
computed:{
fullname: function(){
return this.firstname+" "+this.lastname
}
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="../js/vue.js"></script>
<script>
/*
注释 Ctrl + shift + /
定义一个对象
const 是常量，指向的对象不可改变，但是里面属性的值可以改
*/
/* const obj ={
name:'张三',
age:'18',
sex:'男'
}
console.log(obj) */
const name ='王五';
/* 注意这里要用分号;
ES5的写法
*/
const age ='18';
const obj ={
username:name,
age:age
}
console.log("1",obj)
const wayes5 = {
run : function (){
},
eat: function(){
},
}
console.log(wayes5)
/* 注意这里要用分号;
ES6的写法
*/
const username = '小燕子'
const obj2 ={
username,
age,
}
console.log("2",obj2)
/*
函数的增强写法
*/
const wayes6 = {
run(){
console.log("这里是es6的写法")
}
};
console.log(wayes6)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!-- <button v-on:click="message++">+</button>
<button v-on:click="message--">-</button> -->
<!--
ctrl + / 块注释
-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
<h2>v-on没有参数</h2>
<!-- 没有参数的时候（）可以写可以不写 -->
<button @click="add()">按钮1</button>
<button @click="sub">按钮2</button>
<h2>v-on参数</h2>
<button @click="fly(1)">按钮1</button>
<button @click="show1">按钮2</button>
<button @click="show(123,$event)">按钮3</button>
<button @click="show(name,$event)">按钮4</button>
<!--
点击按钮，两个都会触发，冒泡
阻止冒泡 @click.stop
阻止默认事件 .prevent
-->
<div @click="divClick()">
<button @click.stop="btnClick()">按钮</button>
<br />
<form action="baidu">
<input type="submit" value="sumbit" @click.prevent="sumbitc"/>
<!-- 监听键盘松开的事件 -->
<input type="text" @keyup="keyUp()" />
<input type="text" @keyup.enter="keyUp()" />
</form>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:0,
name:'张三'
},
// methods里面的方法用，逗号隔开
methods: {
add(){
this.message++
},
sub(){
this.message--
},
fly(a){
console.log("1------------")
},
show1(event){
console.log(event)
},
show(a,event){
console.log(a,event)
},
divClick(){
console.log("divClick")
},
btnClick(){
console.log("btnClick")
},
sumbitc(){
console.log("提交")
},
keyUp(){
console.log("v")
}
}
});
</script>
</body>
</html>
事件监听
v-on
v-on:click = @click 为元素绑定点击的监听函数
v-bind :class = :class
663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
