浅学vue

一、vue介绍

1. vue的概念：
   一个渐进式的js前端框架。Vue是一个js库。(jquery也是一个js库)
2. vue的表达式：
   {{}}
3. vue的其他注意点：

• Vue只关注视图层。
• Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
• Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
• Vue学习起来非常简单。
• vue的官网:https://cn.vuejs.org/

4. vue的特性

• 轻量级的
• 数据绑定
• 指令
• 插件化
• 组件化

二、Vue的安装

官方提供两个版本
官方链接

三、vue入门

1. 步骤：

• 在新创建的web项目的HTML中引入vue的文件
• 准备一个被挂载元素
• 创建Vue对象，并挂载相应的元素
  

2. 简单的一个实例挂载el的标签。
   该标签可以通过id、class、标签挂载，建议使用id挂载

    
    
    
    



    
    

        {{message}}
    

    
    -->


   


    
        
    
    
        
            
            
                
            
        
    

3. Vue中的数据(data)详解

• Vue实例的数据保存在配置属性data中, data自身也是一个对象.
• 通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

    
    
    
    


    
     

         {{message}} 

         {{user}} 

         {{user.name}} 

         {{hobbys}} 

         {{hobbys[0]}}
     
    
    

4. Vue中的methods方法详解

• Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
• 方法都是被Vue对象调用,所以方法中的this代表Vue对象
• 使用方式：直接字HTML模板标签中调用方法 {{方法名()}}；
  js中通过Vue对象实例调用方法，vue对象.方法名字();

    
    
    
    


    

        {{username}}

        {{age}}

        {{say("我爱游泳")}}
    

    

5. vue数据双向绑定体验

• 监听input中值的改变同步到data中的message上，将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。

    
    
    


    

        
        
        
        
{{username}}
>
    
    

说明：MVVM模式。Model View ViewModel
ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；
对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

四、vue的表达式

简单的表达式（加减乘除）、字符串的加法，就是拼接、三目运算、字符串操作、对象操作、数组操作

    
    
    


    

        {{1+1}}

        
        {{num1+num2}} ==== {{num1-num2}} === {{num1*num2}} === {{num1/num2}}

        
        {{num2+num3}}

        
        {{sex?"男":"女"}}

        
        {{username}} === {{username.length}} === {{username.substr(4)}} === {{username.toUpperCase()}}

        
        {{user}} === {{user.username}} === {{user.eat()}}

        
        {{hobbys}} === {{hobbys[0]}} === {{hobbys.length}}

    
    

五、vue的指令

1. v-text和v-html指令：
   两者的区别：
   两者都是用于显示标签中的数据，标签中原来的数据会被覆盖住。但是v-text是文本显示，它不会去解析标签，所以数据会原封不动的展示，而 v-html是HTML显示，会去解析标签。

    
    
    


    
    

        原来张三在玩蛇

        原来张三在玩蛇
    
    

2. v-for指令：
   可以遍历的有：数组、对象、数字、字符串…

    
    
    


    
    

        
        

            
{{v}}

            
{{i}} - {{v}}

        
        
        

            
{{i}} - {{k}} - {{v}} 

        
        
        

            
 {{v}}

        
        
        

            
{{v}}
        
    
    

3. v-for指令的案列：
用v-for写一个学生列表

    
    
    



    

        

            

                

                    
编号
                    
姓名
                    
性别
                    
年龄
                    
部门
                
            
            

                

                    
{{v.id}}
                    
{{v.name}}
                    
{{v.sex?"男":"女"}}
                    
{{v.age}}
                    
{{v.dept?v.dept.name:""}}
                
            
        
    
    

4. v-show指令：
是否显示数据，（为false时，数据还在，只是看不见而已）

    
    
    



    

        
 张三游泳
    
    

5. v-if指令
   v-else-if 和v-else

    
    
    


    
    

        
 年轻
        
中年
        
长命百岁
    
    

6. v-bind指令
   绑定指令。将data中的数据绑定到标签上,作为标签的属性
   标准写法：
   v-bind:src=“src” -> 为标签中的src属性绑定的值
   简便写法：打个冒号
   :src=“src” -> 为标签中的src属性绑定的值

7. v-bind指令的案列
使用v-for指令和v-bind指令联合起来做一个下拉框。并还要拿到下拉框的id

    
    
    


    
    

        
            {{v.name}}
        
    
    

8. v-model指令
上面有将这个双向绑定，就不多做解释

    
    
    


    
    

        
         {{inputVal}}

        
        性别：
            男
            女
        {{sexVal}}

        
        爱好:
         打篮球
         游泳
         踢足球
         打羽毛球
        {{hobbyVal}}
        

        
        四川省:
        
            成都
            眉山
            乐山
            南充
        
        {{selectVal}}
        

        
         {{textareaVal}}
    
    

9. v-on指令
事件的绑定。
标准形式： v-on:事件类型=“方法名()”
简便形式：@事件类型=“方法名()”

六、组件：分为全局组件和局部组件

1. 全局组件
   定义在vue对象外面，在挂载了vue对象上的html标签中,都可以使用:

• 一定要先定义组件,再进行vue的挂载
• 模板中必需有一个根标签，否则没有效果
• 取名的问题： 如果使用驼峰命名法 myTag ->

2. 局部组件
定义在vue对象中，只能在挂载的html标签中使用;

3. 全局组件和局部组件的区别
全局组件可以作用于全局的挂载对象;
局部组件:只能作用于挂载的当前对象;

结语：vue加强篇点击进入