Vue.js之慕课网学习

使用开发版本的Vue.js进行学习

一、Vue的基础语法

1.创建第一个Vue实例

1）在项目中创建一个vue.js文件，将在官网下载的开发版本的Vue.js的代码复制到你的vuejs文件中

2）在项目中创建index.html文件，在index.html中引入vue.js：<script src="./vue.js"></script>

实例：在index.html中输出 hello word

<div id="root">{{msg}}</div>
<script>
//创建Vue实例
new Vue({
el:"#root",//接管id="root"这个元素里面的内容
data:{
msg:"hello world"
}
})
</script>

2.挂载点、模板与实例

（1）Vue实例的挂载点：<div id="root"></div>，即Vue实例里面的el属性对应的后面的id所对应的dom节点。

挂载点的作用：Vue只会处理挂载点下面的内容

（2）模板：在挂载点内部的这些内容称为模板内容

a.模板可以写在挂载点内部

<h1>hello {{msg}}</h1>

</div>

b.模板也可以写在Vue实例里的template属性里面

  new Vue({
el:"#root",//接管it="root"这个元素里面的内容
template:'<h1>hello {{msg}}</h1>',
   data:{
   msg:"world"
   }
   })

(3)Vue的实例

a.指定一个挂载点

b.把模板写上

c.Vue自动结合你的模板和数据生成最终要展示的内容，然后将内容放在挂载点中

3.Vue实例中的数据，事件和方法

（1）在Vue实例，数据如何显示在模板上

a. 插值表达式：在data数据项里面，我们可以配置任意的数据名字，那么在模板里将{{}}里面放置该名字

<div id="root">
       <h1>hello {{number}}</h1>
    </div>
    <script>
     //创建Vue实例
      new Vue({
        el:"#root",//接管it="root"这个元素里面的内容
        data:{
          msg:"world",
          number:123
        }
      })
    </script>

b(1).v-text指令：即告诉h1，你要保存的内容就是v-text指令所对应的变量

b(2). v-html指令：即告诉h1，你要保存的内容就是v-html指令所对应的变量

b(3).v-text和v-html指令的区别

   < div v-text=" content"></ div>
   </div>
   <script>
//创建Vue实例
new Vue({
   el:"#root",//接管it="root"这个元素里面的内容
   data:{
content:"<h1>hello</h1>"
   }
})
   </script>

输出结果：

原因：v-text指令将<h1>标签转义，而x-html则不会

（2）如何给模板上的某一标签绑定事件

模板指令（ v-on:指令，简写，等同于 @）：1）在标签里绑定一个事件，如click事件，当事件被触发时时，就会调用该事件里面的方法

<div id="root">
<div v-on:click="handleClick">{{content}}</div>
</div>

2）方法写在Vue实例里面的methods里面

new Vue({
el:"#root",//接管it="root"这个元素里面的内容
data:{
content:"hello"
},
   methods:{
handleClick:function(){
   this.content="world";
}
   }

})

***不是面向dom编程，而是面向数据编程

4.Vue中的属性绑定和双向数据绑定

（1）属性绑定

v-bind:(简写，等同于 :)属性：例如，将title属性与data数据项里的t绑定

   原代码： <div id="root">
   <div title ="this is hello world ">hello world</div>
   </div>

//创建Vue实例
new Vue({
el:"#root" //接管it="root"这个元素里面的内容
})
</script>

新代码：<div id="root">
   <div v-bind: title=" 'dear'+' '+ t">hello world</div>
   </div>
   <script>
              //创建Vue实例
   new Vue({
el:"#root",//接管it="root"这个元素里面的内容
data:{
   t:"this is hello world"
   }
})
   </script>

输出结果：

（2）双向属性绑定：v-model:模板指令

单向绑定：数据决定页面的显示，但是页面无法决定数据里的内容。

例当改变输入框的值时，对应的下面的内容也随之改变

<div id="root">
      <div :title="'dear'+' ' + t">hello world</div>
      <input v-model :value=" content"/>
      <div>{{ content}}</div>
    </div>
    <script>
     //创建Vue实例
      new Vue({
        el:"#root",//接管it="root"这个元素里面的内容
        data:{
          t:"this is hello world",
          content:"this is content"
        }
      })
    </script>

输出结果：

5.Vue中的计算属性和侦听器

（1）计算属性：在Vue实例中，computed:{}

（2）侦听器：在Vue实例中，watch:{}

例：

<div id="root">
     姓:<input v-model="firstName"/>
     名：<input v-model="lastName"/>
     <div>{{fullName}}</div>
     <div>{{count}}</div>
</div>

运行结果：

6.v-if,v-show,v-for指令

（1）v-if指令：当对应的数据项内容是false时，源码中会将该标签直接从dom中移除

（2）v-show指令：当对应的数据项内容是false时，源码中将该标签的style属性改为dispaly:none

（3）v-for指令：控制一组数据，通过这组数据来循环展示页面dom上的结构

a.<ul>
<li v-for="item of list" ：key="item">{{item}}</li>
</ul>

要求：Vue实例中：list:[1,2,3]，每一个值都不相同

二、Vue中的组件

1、todolist功能开发

例：在输入框中输入数据，点击‘提交’按钮，数据以ul形式展示在下方，并清除输入框数据。

<div id="root">
      <div>
         <input v-model="inputValue"/>
         <button @click="handleSubmit">提交</button>
      </div>
      <ul>
        <li v-for="(item,index) of list":key="index">{{item}}</li>
      </ul>
    </div>
    <script>
       new Vue({
         el:"#root",
         data:{
           inputValue:'',
           list:[]
         },
         methods:{
           handleSubmit:function(){
             this.list.push(this.inputValue)
             this.inputValue=""
           }
         }
       })
    </script>

运行结果如下：

2、todolist组件拆分

组件：页面上的某一部分

例：将上例中的li组件拆分开来

（1）创建全局组件：在Vue实例上面，Vue.component({}）

（2）创建局部组件：在Vue实例上面，V ue.component({}，并且在Vue实例中，对局部组件进行注册：components:{}

<div id="root">
      <div>
         <input v-model="inputValue"/>
         <button @click="handleSubmit">提交</button>
      </div>
      <ul>
        <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        >
        </todo-item>
      </ul>
    </div>
    <script>
    //创建全局组件todo-item
       Vue.component('todo-item',{
         props:['content'],//接收传递过来的content属性
         template:'<li>{{content}}</li>'
       })

    // 创建局部组件
    // var TodoItem={
    //     template:'<li>item</li>'
    // }

       new Vue({
         el:"#root",
         //对局部组件进行注册
         // components:{
         //   'todo-item':TodoItem
         // },
         data:{
           inputValue:'',
           list:[]
         },
         methods:{
           handleSubmit:function(){
             this.list.push(this.inputValue)
             this.inputValue=""
           }
         }
       })
    </script>

3、组件与实例的关系

（1）每一个Vue的组件又是一个Vue的实例。

例如，在上面的例子中，在组件中添加函数方法

//创建全局组件todo-item

       Vue.component('todo-item',{
         props:['content'],//接收传递过来的content属性
         template:'<li @click="handleClick">{{content}}</li>',
         methods:{
           handleClick:function(){
             alert("clicked")
           }
         }
       })

（2）每一个Vue的实例也就是一个Vue的组件

4、实现todolist的删除功能

例：功能：在文本框中输入数据，数据显示在文本框下面；鼠标点击一条数据，则该条数据被删除。

（1）父组件通过属性（prop）的形式给子组件传值，子组件获得父组件传来的内容和索引

（2）子组件通过$emit向父组件跑出触发事件名称（delete）和触发事件的list的索引值

（3）父组件通过监听对应事件名称（@delete）触发函数handleDelete

<div id="root">
      <div>
         <input v-model="inputValue"/>
         <button @click="handleSubmit">提交</button>
      </div>
      <ul>
        <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
        >
        </todo-item>
      </ul>
    </div>
    <script>
    //创建全局组件todo-item
       Vue.component('todo-item',{
         props:['content','index'],//接收传递过来的content属性
         template:'<li @click="handleClick">{{content}}</li>',
         methods:{
           handleClick:function(){
               this.$emit('delete',this.index)//触发自定义函数
           }

}
})

    // //创建局部组件
    // var TodoItem={
    //     template:'<li>item</li>'
    // }