初识VUE, 使用npm指令
npm i vue@2下载vue2版本
Vue是单页应用
<div id="app">
{{msg}}
</div>
引入下载好的vue
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
/* 挂载点 和div对应 */
el:"#app"，
/* 数据 */
data:{
msg:'欢迎你来到我的世界鱿鱼丝'
}，
/* 定义方法的地方 */
methods:{
}
})
</script>
页面成功显示
v-on click 点击事件
<!-- <h1 v-on:click="fn()">{{msg}}</h1> -->
<!-- fn可以加括号也可以不加括号 v-on:click简写 @click (可以直接写JS表达式)-->
<!-- {{}}里面可以写表达式 -->
<!-- <h1>{{msg.substring(0,4)}}</h1> -->
v-if判断
<!-- vue的条件判断v-if后面支持变量也支持直接写布尔值 -->
<h1 v-if="str=='a'">啊啊啊啊啊</h1>
<h1 v-else-if="str=='b'">不不不不不</h1>
<h1 v-else>嗨嗨嗨</h1> -->
<!-- 属性想使用动态变量需要加v-bind v-bind可以简写成 :
@click (可以直接写JS表达式) -->
<!--class对象里面的key表示类名-->
<!-- <h1 v-bind:class="{red:flag,'f-z':flag}" @click="flag=!flag">兄弟你瘦了</h1> -->
<!-- style对象里面的key表示属性名-->
<!-- <h1 v-bind:style="{color:flag?'blue':''}" @click="flag=!flag">兄弟你瘦了</h1> -->
v-for循环
<!-- v-for循环里面有两项item表示数组的每一项index表示数组的索引循环的时候需要加key key最好时候对象里面的属性如果没有再使用index-->
<!-- v-for="(item,index) in arr" v-bind:key="" 循环 -->
v-model可以实现数据双向绑定
<!-- v-model就类似于上面的写法，是一种语法糖 来实现双向数据绑定 -->
<!-- <input type="text" v-model="str"> -->
获取按键修饰符@keyCode
<input type="text" :value="str" @keyup="keyFn">
keyup后面可以接修饰符（接.enter,接.keyCode也可以回车keycode是13） -->
methods: {
keyFn(e){
let event=e || event
if(event.keyCode==13){
alert('123')
}
}
},
