Vue 基础语法学习（二）

本文主要讲解的是Vue的基础语法和怎么使用。想if、for、v-show等基础的节点用法。可以把系列文章做为参考字典来使用，也可以欢迎各位看官有什么不懂的和想了解的可以在公众号后端提问留言系列文章

1：新创建一个vue文件的时候入下图代码

<template> 
    <div> 
   </div>
</template>
<style>
// 在这里写css样式
</style>
<script> 
// 这里写逻辑代码
</script>

这里需要注意的是：在template 元素中只能出现一个子几点，也就是只能出现一个div

在style 中就是写css样式，也可以用你的sass。其他语法下期做结束

在script 中，写自己的业务逻辑代码，和我们的js代码

讲解<script></script> 模块一般每一个组建都有一个name，和一个data()数据源（暂且就叫数据源吧）。

以上两个方法是必须的。但是随着vue的生命周期开始就有不同的方法。

1:在所有的页面加载前就用created

2:所有的html渲染完毕就用mounted

3:全部执行的事件都在methods

常用函数功能字典列表添加点击事件

<button v-on:click="greet('hello click')">提交</button>

绑定数据

<h2>{{sendmsg}}</h2>

文本框绑定数据

// 只需在data()有对应的user的字典即可

<input type="text" v-model="user.fnae"> 

<input type="text" v-model="title">

if语句判断

<div v-if="showMode">if语句</div>

v-show显示

<div v-show="showMode">为true则显示</div>

for循环

<div v-for="ites in arrays" class="gose">{{ites}}</div>

键盘事件

<input type="text" v-on:keyup="keyupClick" v-on:keyup.enter="enterClick">

最后是的代码就是设置数据源了

<script> 
  export default { 
  name:'test', 
  data(){ 
    return { 
      title:"hellow js", 
      user:{ 
        fnae:"dd->>>", 
        lname:"ffff"
      }, 
      badgeV:"iiiii", 
      arrays:apps, 
      showMode:true
    } 
  }, 
  methods:{ 
     greet:function (msg) { 
       alert('-----'+ msg); 
     }, 
    keyupClick:function () { 
      console.log('-----'); 
    }, 
    enterClick:function () { 
      console.log('你出发了回车键') 
    } 
  } 
} 
</script>

下一期讲解计算属性和组建封装了

有些地方说的不到位，还请各位看官指正。。。

欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号

可以来微信公众号（洲洲哥）后台给我们留言。快来扫码关注我们吧！