VUE基本操作==>基本语法入门

推荐jspang大佬的 vue 视频教程：https://juejin.im/post/5b834971f265da436d7e4a9d

node安装教程：https://www.cnblogs.com/zhouyu2017/p/6485265.html

此篇文章以 script 引入的方式介绍vue基本语法

    <script type="text/javascript" src="../assets/js/vue.js" ></script>

1.helloworld

最经典的 hello world

    <div id="app" >
        {
  {message}}
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'你好'
            }
        })
    </script>

2.v-if , v-else, v-show

v-if 和v-show的区别：

        v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。

        v-show：调整css dispaly属性，可以使客户端操作更加流畅。

    <div id="app" >
        <p v-if="isLogin" >欢迎回来：chenparty</p>
        <p v-else>请登陆</p>
        <p v-show="isShow" >O(∩_∩)O</p>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:true,
                isShow:true
            }
        })

在该例子中，如果 isLogin = false ,那么 欢迎回来根本就不会被加载，如果 isShow 为 false ， 那么 那个笑脸 将会加上  display:none

3.v-for

v-for 就是个 for循环，输出内容的，很常见很好用的一个语句。

如果需要输出序号则这样写：输出序号 v-for 里面这样写: (stu,index) in sortStudets

<div id="app" >
        <ul>
            <li v-for="item in sortItems" >
                {
  {item}}
            </li>
        </ul>
        <ol>
            <!-- 输出 序号 -->
            <li v-for="(stu,index) in sortStudets" >
                <span>序号：{
  {index+1}}。</span><span>name:{
  {stu.name}}</span>&nbs