Vue：/vju:/。类似于View
是一个构建用户界面的渐进式框架。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./static/vue.min.js"></script> </head> <body> <div id="app">{{sayHi}}</div> <script> //数据模板引擎 new Vue({ el:"#app", data:{ sayHi:"Hello,Vue!" } }) </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods:{
add:function(){
this.counter=this.counter+1;
},
sub:function(){
this.counter=this.counter-1;
}
}
})
</script>
</body>
</html>
<body>
<div id="app" v-once>
{{once}}
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
once:"表示元素和组件只渲染一次!"
},
})
</script>
</body>
<body>
<div id="app" v-text="sayHi"></div>
<script>
//数据模板引擎
new Vue({
el:"#app",
data:{
sayHi:"Hello,Vue!"
}
})
</script>
</body>
<body>
<div id="app" v-html="sayHi"> </div>
<script>
new Vue({
el: "#app",
data: {
sayHi: "<h1>Hello, Vue</h1>"
}
}
)
</script>
</body>
<body>
<div id="app" v-pre>
{{pre}}
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
pre:"将代码原封不动的解析出来!"
},
})
</script>
</body>
<body>
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app" v-cloak>
{{pre}}
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
setTimeout(function() {
let app = new Vue({
el: "#app",
data: {
pre: "斗篷函数!"
},
})
}, 1000)
</script>
</body>
<div id="app3"> <ul> <li v-for="aihao in hobby">{{aihao}}</li> </ul> </div> <script> new Vue({ el: "#app3", data: { hobby: ["跑步", "游泳", "阅读" ], } } ) </script>
<body>
<div id="app">
<a :href="baidu">百度一下</a>
<img :src="imgSrc">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
baidu: "https://www.baidu.com/",
imgSrc: "https://imgsrc.baidu.com/baike/pic/item/0df3d7ca7bcb0a4661ab1f6c6463f6246a60afde.jpg"
},
})
</script>
</body>
<body>
<div id="app">
<div :class="[‘class1‘,‘class2‘]">数组语法</div>
<div :class="arryClass">数组语法2</div>
<div :class="{‘class5‘:true,‘class6‘:false}">对象语法</div>
<div :class="{‘class7‘:isclass7,‘class8‘:isclass8}">对象语法2</div>
<div :class="getObjClass()">对象语法3</div>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
arryClass: [‘class3‘, ‘class4‘],
isclass7: true,
isclass8: false,
},
methods: {
getObjClass: function() {
return {‘class9‘:true,‘class10‘:false}
}
}
})
</script>
</body>
<body>
<div id="app">
<div :style="[redFont, bFont]">数组语法</div>
<div :style="{color:‘blue‘,fontSize:‘10px‘}">对象语法</div>
<div :style="{fontSize:curSize}">对象语法2</div>
<div :style="getObjStyle()">对象语法3</div>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
redFont: {
color: ‘red‘
},
bFont: {
fontSize: "20px"
},
curSize:"15px"
},
methods: {
getObjStyle: function() {
return {
color: ‘yellow‘,
fontSize: ‘40px‘
}
}
}
})
</script>
</body>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-on:click="changeColor(index)" v-bind:class="{active:i==index}" v-for="(item,index) in movies">{{index}}--{{item}}</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
movies: ["阿甘正传", "教父", "最后一课"],
i: false
},
methods: {
changeColor(index) {
this.i = index
}
}
})
</script>
</body>
<body>
<div id="app">
{{fullName}}:{{TotalPrice}}
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
firstName: "张",
lastName: "三",
books: [{
id: "001",
name: "深入理解Python",
price: 100,
count: 3
},
{
id: "002",
name: "深入理解Vue",
price: 200,
count: 2
}
]
},
computed: {
fullName: function() {
return this.firstName + this.lastName
},
TotalPrice: function() {
return this.books.reduce((total, bo) => {
return total + bo.price * bo.count
}, 0)
}
}
})
</script>
</body>
<div id="app9"> <input v-model="num1" /> + <input v-model="num2" /> = {{sum}} </div> <script> new Vue({ el: "#app9", data: { num1: 0, num2: 0, }, computed: { sum:function() { return parseInt(this.num1) + parseInt(this.num2); } }, } ) </script>
<body>
<div id="app">
{{fullName}}
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
firstName: "张",
lastName: "三"
},
computed: {
fullName: {
set(str) {
const arryStr = str.split(" ")
this.firstName = arryStr[0]
this.lastName = arryStr[1]
},
get() {
return this.firstName + this.lastName
}
}
}
})
</script>
</body>
<body>
<div id="app">
{{fullName}}
{{fullName}}
{{fullName}}
{{fullName}}
{{getFullName()}}
{{getFullName()}}
{{getFullName()}}
{{getFullName()}}
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
firstName: "张",
lastName: "三"
},
computed: {
fullName() {
console.log("computed，调用次数")
return this.firstName + this.lastName
}
},
methods:{
getFullName(){
console.log("methods，调用次数")
return this.firstName + this.lastName
}
}
})
</script>
</body>
<body>
<div id="app" @click="divClick">
divClick
<button type="button" v-on:click="sayHello">sayHello</button>
<button type="button" @click="sayHi(‘张三‘)">sayHi</button>
<button type="button" @click.stop="btnClick">防止冒泡</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
let app = new Vue({
el: "#app",
data: {
},
methods: {
sayHello() {
console.log("Hello,World!");
},
sayHi(strName) {
console.log("Hello," + strName + "!");
},
divClick(){
console.log("hello，Div");
},
btnClick(){
console.log("hello，Btn");
}
}
})
</script>
</body>
<div id="app5"> <ul> <li v-if="score>80">优秀</li> <li v-else-if="score>60" >及格</li> <li v-else="score">补考</li> </ul> </div> <script> new Vue({ el: "#app5", data: { score:16, } } ) </script>
<body>
<div id="app">
<ul>
<li v-if="score>80">优秀</li>
<li v-show="score>80">优秀</li>
<li v-show="score<60">不及格</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script>
new Vue({
el: "#app",
data: {
score: 16,
}
}
)
</script>
</body>
<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> <ul> <li v-for="(item,index) in movies">{{index+1}}----{{item}}</li> </ul> <br> <!-- 循环obj对象 --> <ul> <li v-for="item in objMovies">{{item}}</li> </ul> <ul> <li v-for="(value,key) in objMovies">{{key}}---{{value}}</li> </ul> <ul> <li v-for="(value,key,index) in objMovies">{{index+1}}---{{key}}---{{value}}</li> </ul> <ul> <li v-for="(value) in objMovies" :key="value"> {{value}}</li> </ul> </div> <script src="js/vue.js" type="text/javascript"></script> <script> new Vue({ el: "#app", data: { movies: ["阿甘正传", "教父", "最后一课"], objMovies: { name: "狮子王", price: "200", addr: "国家大剧院" }, }, }) </script>
<div id="app8"> 用户名：<input v-model="username" /> <br /> Hello，{{username}} </div> <script> new Vue({ el: "#app8", data: { username: ‘张三‘, }, } ) </script>
<div id="app9"> <input v-model.number.trim.lazy="num1" /> + <input v-model.number.trim.lazy="num2" /> = {{sum}} </div> <script> new Vue({ el: "#app9", data: { num1: 0, num2: 0, }, computed: { sum:function() { return this.num1 + this.num2 ; } }, } )
</div>
<div id="app10">
<div ref="myRef">星</div>星
<button v-on:click="changeColor2">变色</button>
</div>
<script>
new Vue({
el: "#app10",
data: {
isActive: true,
},
methods: {
changeColor2: function() {
this.$refs.myRef.style.color = "red"
}
}
}
)
<script>
原文：https://www.cnblogs.com/YK2012/p/12222161.html