Vue 基础语法学习（二）

本文首发地址

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

Vue基础学（一）

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></script>
的代码就是设置数据源了

<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>

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

如有问题可添加我的QQ：1290925041
还可添加QQ群:234812704（洲洲哥学院）
欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号

更多消息

更多信iOS开发信息 请以关注洲洲哥 的微信公众号，不定期有干货推送：

这里写图片描述