vue基本语法2

vue的模板里面 所有的内容要被一个根节点包含起来

<template>
<!-- vue的模板里面 所有的内容要被一个根节点包含起来  -->
  <div id="app">  
          <h2>{{msg}}</h2>
      <br>
      这是一个根组件
    <br>
    <h3>{{obj.name}}</h3>
    <br>
    <hr>
    <br />
    <ul>
      <li v-for="item in list">
          {{item}}
      </li>
    </ul>
    <br>
    <hr>
    <br />
    <ul>
      <li v-for="item in list1">
          {{item.title}}
      </li>
    </ul>
     <br>
      <hr>
      <br />
      <ul>
        <li v-for="item in list2">
            {{item.cate}}

            <ol>
              <li v-for="news in item.list">
                  {{news.title}}
              </li>
            </ol>
        </li>
      </ul>
  </div>
</template>
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          obj:{
            name:"张三"
          },
          list:['111','222','333'],
          list1:[
            {'title':'11111'},
            {'title':'222'},
            {'title':'333333'},
            {'title':'44444'}
          ],
          list2:[
              {
                "cate":"国内新闻",
                "list":[
                   {'title':'国内新闻11111'},
                   {'title':'国内新闻2222'}
                ]
              },
              {
                "cate":"国际新闻",
                "list":[
                   {'title':'国际新闻11111'},
                   {'title':'国际新闻2222'}
                ]
              }
          ]
        }
      }
    }
</script>
数据循环遍历
  <div id="app">  
          <h2>{{msg}}</h2>
      <br>
      这是一个根组件
    <br>
    <h3>{{obj.name}}</h3>
    <br>
    <hr>
    <br />
    <ul>
      <li v-for="item in list">
          {{item}}
      </li>
    </ul>
    <br>
    <hr>
    <br />
    <ul>
      <li v-for="item in list1">
          {{item.title}}
      </li>
    </ul>
     <br>
      <hr>
      <br />
      <ul>
        <li v-for="item in list2">
            {{item.cate}}
            <ol>
              <li v-for="news in item.list">
                  {{news.title}}
              </li>
            </ol>
        </li>
      </ul>
  </div>
</template>
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          obj:{
            name:"张三"
          },
          list:['111','222','333'],
          list1:[
            {'title':'11111'},
            {'title':'222'},
            {'title':'333333'},
            {'title':'44444'}
          ],
          list2:[
              {
                "cate":"国内新闻",
                "list":[

                   {'title':'国内新闻11111'},
                   {'title':'国内新闻2222'}
                ]
              },
              {
                "cate":"国际新闻",
                "list":[

                   {'title':'国际新闻11111'},
                   {'title':'国际新闻2222'}
                ]
              }

          ]

        }
      }
    }
</script>

数据绑定

<template>
  <div id="app">  
          <h2>{{msg}}</h2>
      <br>
      <div v-bind:title="title">鼠标瞄上去看一下</div>
      <img src="https://www.itying.com/themes/itying/images/logo.gif" />
       <br>
        <br>
              <!-- 绑定属性 -->
       <img v-bind:src="url" />
        <br>
        <img :src="url" />
        <br>
        <br>
        {{h}} 
        <!-- 绑定html -->
        <div v-html="h">
        </div>
        <!-- 绑定数据的另一种方法 -->
       <div v-text="msg">
       </div>
         <!-- v-bind:class  :class的使用 -->
       <div v-bind:class="{'red':flag}">
        我是一个div
       </div>
    <br>
    <br>
    <div :class="{'red':flag,'blue':!flag}">
          我是另一个div
    </div>
      <br>
      <br>
      <!-- 循环数据 第一个数据高量 -->
      <ul>
        <li v-for="(item,key) in list">
          {{key}}---{{item}}
        </li>
      </ul>
        <br>
        <br>
      <ul>
        <li v-for="(item,key) in list"  :class="{'red':key==0,'blue':key==1}">
          {{key}}---{{item}}
        </li>
      </ul>
      <br>
      <br>
      <!-- v-bind:style  :style的使用 -->
    <div class="box" v-bind:style="{'width':boxWdith+'px'}">
      我是另一个div
    </div>
  </div>
</template>
<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          title:'我是一个title',
          url:'https://www.itying.com/themes/itying/images/logo.gif',

          h:'<h2>我是h2</h2>',
          list:['1111','2222','3333'],
          flag:false,
          boxWdith:500
        }
      }
    }
</script>
<style lang="scss">
  .red{
    color: red;
  }
  .blue{
    color:blue;
  }
  .box{
    height: 100px;
    width: 100px;
    background: red;
  }
</style>

数据绑定改变试讲

<template>
  <div id="app">  
          <h2>{{msg}}</h2>
      <input type="text" v-model='msg' />
      <button v-on:click="getMsg()">获取表单里面的数据get</button>
      <button v-on:click="setMsg()">设置表单的数据set</button>
      <br>
      <br>
      <hr>
      <br>
      <br>
      <input type="text" ref="userinfo" />
      <br>
      <br>
      <div ref="box">我是一个box</div>
      <br>
      <br>
      <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
     </div>
</template>
<script>
  /*
  双向数据绑定   MVVM   vue就是一个MVVM的框架。
  M  model
  V  view
  MVVM：  model改变会影响视图view，view视图改变反过来影响model
  双向数据绑定必须在表单里面使用。
  */
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue'         
        }
      },methods:{   /*放方法的地方*/
          getMsg(){
              // alert('vue方法执行了');
              //方法里面获取data里面的数据
                alert(this.msg);
          },
          setMsg(){
              this.msg="我是改变后的数据";
          }, getInputValue(){
              //获取ref定义的dom节点
              console.log(this.$refs.userinfo);
              this.$refs.box.style.background='red';
              alert(this.$refs.userinfo.value);
                      
          }
      }
    }
</script>

定义方法 执行方法 获取数据 改变数据 执行方法传值及事件对象

<template>
  <div id="app">  
    <!-- 
      <img v-bind:src='url' />
      <img :src='url' /> -->
      {{msg}}
    <br>
    <br>
    <br>
      <button v-on:click="run1()">执行方法的第一种写法</button>
      <br><br><br>
      <button @click="run2()">执行方法的第二种写法</button>
      <br>
      <br>
      <br>
           <button @click="getMsg()">获取data里面的msg</button>
      <br>
      <br>
      <br>
            <button @click="setMsg()">改变data里面的msg</button>
      <br>
      <br>
      <br>
            <button @click="requestData()">请求数据</button>
      <hr>
      <ul>
        <li v-for="(item,key) in list">
          {{key}}---   {{item}}
        </li>
      </ul>
      <br>
      <br>
      <br>
      <button @click="deleteData('111')">执行方法传值111</button>
      <br>
      <br>
      <button @click="deleteData('222')">执行方法传值2222</button>
      <br>
      <br>
      <br>
      <button data-aid='123' @click="eventFn($event)">事件对象</button>      
  </div>
</template>
<script>
    export default {     
      data () { 
        return {
          msg: '你好vue',
          list:[]      
        }
      },
      methods:{
        run1:function(){
          alert('这是一个方法');
        },
        run2(){
          alert('这是另一个方法');
        },
        getMsg(){
            alert(this.msg);
        },
        setMsg(){

          this.msg="我是改变后的数据"
        },
        requestData(){

            for(var i=0;i<10;i++){

              this.list.push('我是第'+i+'条数据');
            }
        }
        ,
        deleteData(val){

            alert(val);
        },
        eventFn(e){
          console.log(e);
          // e.srcElement  dom节点
          e.srcElement.style.background='red';
          console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/
        }
      }
    }
</script>

事件结合双向数据绑定实现

<template>
  <div id="app"> 
            <input type="text" v-model='todo' />
      <button @click="doAdd()">+增加</button>
      <br>
      <hr>
      <br>
      <ul>
        <li v-for="(item,key) in list">
          {{item}}   ----  <button @click="removeData(key)">删除</button>
        </li>
      </ul>
  </div>
</template>
<script>
    export default {     
      data () { 
        return {
          todo:'' ,
          list:[]
        }
      },
      methods:{
        doAdd(){
            //1、获取文本框输入的值   2、把文本框的值push到list里面
            this.list.push(this.todo);
            this.todo='';
        },
        removeData(key){
            // alert(key)
            //splice  js操作数组的方法
            this.list.splice(key,1);
        }
      }
    }
</script>

事件结合双向数据绑定实现

<template>
  <div id="app"> 
            <input type="text" v-model='todo' @keydown="doAdd($event)" />
      <br>
      <hr>
      <br>
    <h2>进行中</h2>
          <ul>
            <li v-for="(item,key) in list" v-if="!item.checked">
              <input type="checkbox" v-model='item.checked'> {{item.title}}   ----  <button @click="removeData(key)">删除</button>
            </li>
          </ul>
    <br>
    <h2>已完成</h2>
    <ul class="finish">
      <li v-for="(item,key) in list" v-if="item.checked">
          <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)">删除</button>
      </li>
    </ul>
    <h2 v-if='ok'>这是一个ok</h2>
    <h2 v-if='!ok'>这是一个No</h2>
    <button @click="getList()">获取list的值</button>
  </div>
</template>
<script>
    export default {     
      data () { 
        return {
          ok:false,
          todo:'' ,
          list: [
            {
              title: '录制nodejs',
              checked: true
            },
            {
              title: '录制ionic',
              checked: false
            }
          ]
       }
      },
      methods:{
        doAdd(e){
              console.log(e.keyCode)
              if(e.keyCode==13){
              //1、获取文本框输入的值   2、把文本框的值push到list里面
              this.list.push({
                title: this.todo,
                checked: false
              })
              this.todo='';
            }
        },
        removeData(key){
            // alert(key)
            //splice  js操作数组的方法
            this.list.splice(key,1);
        },
        getList(){
          console.log(this.list)
        }
      }

    }
</script>
<style lang="scss">
.finish{
   li{
    background:#eee;
  }
}
</style>

vue中的模块化及分装Storage实现Storage实现todolist待办事项 已完成和进行中

<template>
  <div id="app"> 
            <input type="text" v-model='todo' @keydown="doAdd($event)" />
        <hr>
    <br>
    <h2>进行中</h2>
      <ul>
        <li v-for="(item,key) in list" v-if="!item.checked">
           <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}}   --  <button @click="removeData(key)">删除</button>
        </li>
      </ul>
    <br>  
    <br>
    <h2>已完成</h2>
      <ul>      
        <li v-for="(item,key) in list" v-if="item.checked">
          <input type="checkbox"  v-model="item.checked" @change="saveList()" /> {{item.title}}  -- <button @click="removeData(key)">删除</button>
        </li>
      </ul>
  </div>
</template>
<script>
    export default {     
      data () { 
        return {
           todo:'' ,
          list: []
        }
      },
      methods:{
        doAdd(e){
              // console.log(e);
              if(e.keyCode==13){
                  this.list.push({
                    title:this.todo,
                    checked:false
                  })
              }
              localStorage.setItem('list',JSON.stringify(this.list))
        },
        removeData(key){
            this.list.splice(key,1)
            localStorage.setItem('list', JSON.stringify(this.list))
        }
        , saveList(){
           localStorage.setItem('list', JSON.stringify(this.list))
        }
      },mounted(){   /*生命周期函数       vue页面刷新就会触发的方法*/
          var list=JSON.parse(localStorage.getItem('list'));
          if(list){  /*注意判断*/
            this.list=list;
          }
      }
    }
</script>
<style lang="scss">
.finish{
  li{
    background:#eee;
  }
}
</style>