vue.js起步 每个 Vue 应用都需要通过实例化 Vue 来实现。
<div id="app"></div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
复制代码
Vue 构造器中的 el 参数值为 DOM 元素中的 id，这意味着通过常量 vm 进行的改动全部在指定的 id 为 'app' 的div 内，div 外部不受影响。
Vue 构造器中的 data 参数用来定义常量 vm 的初始属性。 Vue 构造器中的 methods 参数用来定义常量 vm 的方法。
事件绑定 通过'v-on:'指令绑定事件，可以简写为'@'。
数据插入 {{}}，括号里面的内容可以填写 data 里的数据，也可以写简单的js表达式。
条件渲染语句 条件判断使用 v-if 指令。vue的条件判断v-if后面支持变量，也支持直接写布尔值。 属性绑定
属性想使用动态变量需要加上v-bind v-bind可以简写成:。
循环语句 循环使用 v-for 指令。v-for 循环 里面有两项 item表示数组的每一项 index表示数组的索引 循环的时候需要加key key最好时候对象里面的属性 如果没有再使用index。v-for 使用in 和 of 都可以。
动态数据绑定 动态数据绑定使用 v-model 指令。当绑定的属性值变化时，页面的内容也会实时变化。
<div id="app">
<p>{{msg}}</p>
<h1>{{'20' + 1}}</h1>
<h1>{{flag?'YES':'NO'}}</h1>
<!-- 点击 输入你的爱好 如果你输入的是java 页面显示 我爱学习java 输入js 显示 我爱学习js
输入其他显示 我什么都不爱学 -->
<button @click="fn2">点我</button>
<h1 v-if="str1=='java'">我爱学习java</h1>
<h1 v-else-if="str1=='js'">我爱学习javaScript</h1>
<h1 v-else>我什么都不爱学</h1> -->
<!-- class 对象里面的key表示类名 -->
<!-- style 对象里面的key表示属性名 -->
<h1 :class="{red:flag1,'font-size':flag1}" @click="flag1=!flag1">中国人不骗中国人</h1>
<h1 :style="{color:flag1?'red':'','font-size':flag1?'60px':''}"
@click="flag1=!flag1">
中国人就骗中国人
</h1>
<ul>
<li
v-for="(item,index) in arr"
v-bind:key="item.id"
@click="choose(index)"
:style="{color:item.flag?'red':''}"
>{{item.title}} --- {{item.id}}</li>
</ul>
<input type="text" v-model="name" placeholder="你的名字">
<h1>姓名:{{name}}</h1>
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'Hello World!',
str1:'',
arr: [{
id:0,
title:"一天某女子深夜造访涛涛",
flag:true,
},{
id:1,
title:"一天某女子深夜造访正见",
flag:false,
},{
id:2,
title:"一天某小学生深夜玩王者荣耀",
flag:false,
}],
flag1: false,
name:''
},
methods:{
fn2(){
this.str1 = prompt('输入你的爱好')
}
}
})
</script>
