1、 总结一下v-text和v-html和插值表达式的差别
v-text 将m中内容以文本格式写入到v中
v-html 将m中内容以html代码的形式渲染到v中
2、 创建一个vue对象并和视图进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、
script
var vm = new Vue({
el:”#app”
data:{
msg:”gly”,
}
})
3、 什么是MVVM模式，这样设计有什么优点
1.视图,往往是div,View
2.数据,数据被用于展示在视图div之中,Model
3.监视者,即由vue创建出来的vm对象,他的作用是,监视数据和视图的变化,并将变化反应到另一方,VM
这三者组合起来,叫做mv vm 设计模式.
4、使用vue将下列data中cat的几条属性插入到页面之中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>姓名:{{cat.name}}</p>
<p>年龄:{{cat.age}}</p>
<p>描述:{{cat.desc}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
cat: {
name: '罗小黑',
age: 8,
desc: '是一只黑色的猫',
}
}
});
</script>
</body>
</html>
5、使用vue，完成一个计算器功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="t1">
<select v-model="aaa" name="fruit">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<input type="text" v-model="t2">
<input type="button" value="计算" @click="jisuan">
<input type="text" :value="result">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
t1: "",
t2: "",
result:"",
aaa:""
},
methods: {
jisuan() {
var t1 = this.t1;
var t2 = this.t2;
var t3 = this.t3;
if (this.aaa == "+") {
this.result = t1 / 1 + t2 / 1 ;
// 弱变量类型和强变量类型语言的差异在于,能否进行隐式的类型转换
}
if (this.aaa == "-") {
this.result = parseInt(t1) - parseInt(t2) ;
}
if (this.aaa == "*") {
this.result = parseInt(t1) * parseInt(t2) ;
}
if (this.aaa == "/") {
this.result = parseInt(t1) / parseInt(t2) ;
}
}
}
});
</script>
</body>
</html>
1473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
