1.主要为vue的创建和MVVM所表示的不同区域
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导vue包 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- vue实列（new）所控制的区域为MVVM中的V -->
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
/* 1.创建了一个vue实列
2.在我们导入vue之后就多了一个vue构造函数
3.new的对象就是 MVVM中的VM */
var vm = new Vue({
el: '#app',/* 使用,行进属性的分割，指代我们所控制的区域位置 */
data: {/* data就是mvvm中的m,用来存放数据的 */
msg: '数据调用'/*名字可以自定义*/
}
})
</script>
</body>
2.v-text,v-html,v-cloak学习
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 属性选择器 */
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak可以解决闪烁问题也就是网速加载慢所导致的，
暂时无法显示masg的内容，{{}}这个为插入语句 -->
<p v-cloak>----{{masg}}-----</p>
<!-- 1.默认v-text没有闪烁问题
2.会覆盖文本中原来的内容，v-cloak不会 -->
<p v-text="masg"></p>
<!-- 要渲染html的必须使用v-html -->
<p v-html="masg2"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
masg: '123',
masg2: '<h1>asdf</h1>',
}
})
</script>
</body>
4.v-bind
<!-- 可以简写为':' -->
<input type="button" name="" id="" value="按钮" :title="mtblind+'相当于js表达式'" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
masg: '123',
masg2: '<h1>asdf</h1>',
mtblind:"v-bind"
}
})
5.v-on
<!-- v-on 为事件绑定机制，其方法在methods中进行书写 -->
<input type="button" name="" id="" value="按钮" v-on:click="show" />
<!-- v-on缩写为'@' -->
<input type="button" name="" id="" value="按钮" @click="show" />
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
masg: '123',
masg2: '<h1>asdf</h1>',
mtblind: "v-bind"
},
methods: {
show: function() {
alert("asdf")
},
show:sh,
show(){
var he=document.createElement("h1");
var text=document.createTextNode("h1");
he.appendChild(text);
document.getElementById("div1").appendChild(he)
}
})
function sh() {
alert("一个方法")
}
</script>
这里主要就是注意作用域的范围
我们可以
this.masg来获取vue这一个实列对象当中的属性域名为masg的域(java)
6.v-model
<!-- 使用v-model来绑定相对应的date数据，vue会监听date的变化 -->
<input type="text" name="" id="" v-model="n2" class="form-control"/>
<button class="btn btn-primary" @click="fa" style="width: 100%;">=</button>
<h2 v-text="n3"></h2>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#div",
data:{
n1:1,
n2:1,
n12:"*",
n3:null
},methods:{
fa(){
switch (this.n12){
case "-" :
this.n3=this.n1-this.n2;
break;
case "*" :
this.n3=this.n1*this.n2;
break;
}
}
}
})
</script>
7.v-for与对属性的操作
在v-for里面可以 v-vlind:key:"xxx.id"来对唯一值进行设置
<div id="d1">
<p v-for="(a,s) in 3">{{a+" "+s}}</p>
</div>
<div id="d2">
<!-- 当绑定v-blind之后要向下面这样才可以设置属性，否贼会去找变量 -->
<p :class="['red','font-size']">数组形式</p>
<!-- 设置3元表达式,属性加上引号，变量不用 -->
<p :class="['red',ture?'font-size':'']">3元表达式</p>
<!-- 数组中使用对象,代替3元表达式 -->
<p :class="['red',{'font-size':ture}]">对象</p>
<!-- 使用v-blind绑定对象，对象的属性为类名，属性的值为标识符 -->
<p :class="tt">也是对象</p>
<!-- or -->
<p :class=" {red: true,fontsize: true}">对象</p>
</div>
<style type="text/css">
.red {
color: gold;
}
.font-size {
font-size: 50px;
}
.fontsize {
font-size: 50px;
}
</style>
<script type="text/javascript">
/* 使用v-blind进行绑定 */
var vm1 = new Vue({
el: "#d2",
data: {
ture: true,
tt: {
red: true,
fontsize: true
}
},
methods: {
}
})
var vm = new Vue({
el: "#d1"
})
</script>
8.Vue过滤器通道
<div id="d1">
<h1>{{ma|faFormat|faFormat2}}</h1>
</div>
<!-- vue过滤器对文本格式经行转换,用在v-blind和mustasche(插值表达器)
{{name|过滤器名称}} 格式Vue.filter('过滤器名称',function(data(为传入的name)){}) -->
<script type="text/javascript">
Vue.filter('faFormat', function(data) {
return data + "通道添加"
})
Vue.filter('faFormat2',function(data){
return data+'==可以添加多个通道'
})
var vm = new Vue({
el: "#d1",
data: {
ma: "vue过滤器"
}
})
</script>
09 私有过滤器和键盘监听
<h3>{{date|dataFormat}}</h3>
<!-- 键盘监听详细的见
https://vue.docschina.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6-Key-Modifiers -->
<h4 v-if="ture">{{key}}</h4>
<input type="text" name="" id="" value="" @keyup.f2="jp" />
<input type="text" name="" id="" value="" @keyup.enter="jp" />
<input type="text" name="" id="" value="" @keyup.o="jp" />
</div>
<script type="text/javascript">
/* 键盘上的每个键位都对应一个键盘码,为此我们可以自己定义监听的键 */
Vue.config.keyCodes = {
v: 86,
f2: 113,
// 无法识别驼峰式命名(camelCase)
mediaPlayPause: 179,
// 可以识别的是双引号括起来的串联式命名(kebab-case)
"media-play-pause": 179,
up: [38, 87]
}
Vue.config.keyCodes.v =86;
var vm = new Vue({
el: "#d1",
data: {
date: Date(),
key: "按键",
ture: true
},
filters: {
/* 定义私有过滤器 ,调用的时候为就近原则，全局和私有名称一直，侧优先调用私有*/
dataFormat: function(data) {
var date = new Date(data);
var m = date.getMonth() + 1;
var d = date.getUTCDate();
var y = date.getFullYear();
return `${y}-${m}-${d}`
}
},
methods: {
jp() {
this.ture = !this.ture
}
}
})
</script>
10 v-for详细版
<body>
<table id="tab1">
<tbody>
<!--<div v-for="item of items"></div>也可以使用of来替代in-->
<tr v-for="student in students">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
</tr>
<!-- 为了便于 Vue 跟踪每个节点的身份，从而重新复用(reuse)和重新排序(reorder)现有元素，你需要为每项提供唯一的 key 属性，
从而给 Vue 一个提示。理想的 key 值是每项都有唯一的 id。这个特殊属性和 Vue
1.x 中的 track-by 粗略相同，但是它会类似于属性运行，所以你需要使用 v-bind 将其与动态值绑定在一起（这里使用简写）： -->
<!--第1个为对象，第2个为索引-->
<tr v-for="(student,index) in students" v-bind:key="student.name">
<tr v-for="n in 10">{{n}}<!--也可以在整数值范围内迭代。在这种情况下，会将模板重复多次。-->
<tr v-for="(student,index) in students">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{index+1}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var vm = new Vue({
el: "#tab1",
data: {
students: [{
name: "joe",
age: "12"
}, {
name: "toney",
age: "12"
}]
}
})
</script>
</body>
