<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<span>{{message}}</span></br>
<!--v-once 指令，只渲染一次，不会随着数据的改变而改变-->
<span v-once>{{message}}</span></br>
<!--可以解析服务器返回的html代码-->
<span v-html="html1"></span></br>
<!--v-text通常情况下接受一个String类型-->
<span v-text="message"></span></br>
<!-- v-pre 用于跳过这儿元素和他的子元素的编译过程
把里面的东西原封不动的显示出来
-->
<span v-pre>{{message}}</span></br>
<!--v-cloak
cloack:斗篷
-->
<!--绑定v-bind
给一个属性（src）绑定一个变量（img）
语法糖：直接写个冒号：
-->
<img v-bind:src="img" alt="" ></br>
<img :src="img" alt=""></br>
<input :value="message"></br>
<!--
动态的绑定class class="{active:isActive}
第一个参数为类名第二个为布尔值
里面可以写很多的类名和布尔值
有两种写法一种直接写
一种通过方法来调用
-->
<h4 :class="{active:isActive}">红色</h4>
<h4 :class="getClass()">红色</h4>
<button @click="change">改变</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'hello',
html1:'<a href="http://www.baidu.com">baidu</a>',
img:'../img/timg.jpg',
isActive:true
},
methods:{
change:function () {
if(this.isActive==true){
this.isActive=false;
}else{
this.isActive=true;
}
},
getClass:function(){
return {active:this.isActive};
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
[v-cloak]{
display:none;
}
<div id="app">
<!--在vue解析之前，div中you一个属性v-cloak
在vue解析之前，div中you没有一个属性v-cloak
这是为了防止html已经加载而 vue代码卡了的情况
-->
<span v-cloak>{{message}}</span>
</div>
<script>
setTimeout(function () {
const app=new Vue({
el:"#app",
data:{
message:'hello'
}
})
},50000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- mustache语法也就｛｛｝｝-->
<div id="app">
<span>{{message}}，zheng</span>
<br>
<!-- 不仅仅能直接写变量，能写简单的表达式-->
<span>{{firstname+lastname}}</span>
<span>counter: {{counter*2}}</span>
</div>sadsa
<script>
const app=new Vue({
el:"#app",
data:{
message:'hello',
firstname:'zheng',
lastname:'shang',
counter:'100'
},
method:{
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号