<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js/vue.js"></script>
</head>
<body>
<h1>the first my vue project </h1>
<div id="app">
{{message}}
</div>
<div id="app-2">
<span v-bind:title="message">
动态绑定数据
</span>
</div>
<div id="app-3">
{{a}}
</div>
<script>
//声明渲染
var app=new Vue({
el:'#app',//元素
data:{
message:"my first vue project"
}//data保存数据，进行数据初始化赋值
});
//v-bind
var app2=new Vue({
el:"#app-2",
data:{
message:"页面加载中"+new Date().toLocaleString()
}
});
//数据与方法
var data={a:"the"};
var vm=new Vue({
el:"#app-3",
data:data
});
//$watch变量改变获取
vm.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal)
})
vm.$data.a="test~"
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js/vue.js"></script>
<script src="../vue.js/vue.min.js"></script>
</head>
<body>
<!--模板语法-->
<!--插值-->
<!--数据绑定时使用文本插值-->
<div id="the">
<span>Message:{{msg}}</span>
<!--v-once值不变，为第一次赋值-->
<span v-once>值不变：{{msg}}</span>
<!--v-html输出真正的html代码-->
<p>Using mustaches:{{rawHtml}}</p>
<!--<p>Using v-html directive:<span v-html="rawHtml"><h1>1234</h1></span></p> 由v-html将rewHtml输出为真正的HTML代码在span中-->
<p>Using v-html directive:<span v-html="rawHtml"></span></p>
<a v-bind:href="url">v-bind绑定元素属性</a>
<a :href="url">v-bind缩写</a>
<p v-on:click="dosomething">v-on监听事件</p>
<p @click="theclick">点击v-on缩写</p>
</div>
<div id="apend">
<p><label>姓：</label>
<input type="text" v-model="user.first">
</p>
<p>
<label>名:</label>
<input type="text" v-model="user.last">
</p>
<p>欢迎您！{{user.first+user.last}}{{user.sex?"男":"女"}}</p>
</div>
<!--vue列表渲染-->
<div id="appthe" style="margin: 20px; width: 600px;">
<table>
<tr v-for="item in items" :key="item.id">
<td>{{item}}</td>
</tr>
</table>
<!--加序号-->
<table>
<tr v-for="(item , index) in items" >
<td>{{index}} . {{item}}</td>
</tr>
</table>
<!--添加标题-->
<table>
<tr v-for="(item , name , index) in title" >
<td>{{index}} . {{name}} . {{item}}</td>
</tr>
</table>
</div>
<script>
//列表v-for渲染
var app=new Vue({
el:"#appthe",
data:{
items:["一个","er","sav","si","wu"],
title:{标题:"笔译",标题2:"biy",标题3:"nouo"}
}
});
var user = {
first: "",
last: "",
sex: false
}
var name = new Vue({
el: "#apend",
data: {
user
}
});
var vm=new Vue({
el:"#the",
data:{msg:"yiduo",rawHtml:"<h1>1234</h1>",url:"https://cn.vuejs.org/"},
methods:{
dosomething: function() {
alert("弹弹")
},theclick:function(){
alert("第二")
}
}
});
vm.msg="div"
</script>
</body>
</html>
浙公网安备 33010602011771号