浅学vue

一、vue介绍

  1. vue的概念:
    一个渐进式的js前端框架。Vue是一个js库。(jquery也是一个js库)
  2. vue的表达式:
    {{}}
  3. vue的其他注意点:
  • Vue只关注视图层。
  • Vue通过新的属性(自定义)和{{表达式}}扩展了 HTML。
  • Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
  • Vue学习起来非常简单。
  • vue的官网:https://cn.vuejs.org/
  1. vue的特性
  • 轻量级的
  • 数据绑定
  • 指令
  • 插件化
  • 组件化

二、Vue的安装

官方提供两个版本
官方链接
浅学vue_第1张图片

三、vue入门

  1. 步骤:
  • 在新创建的web项目的HTML中引入vue的文件
  • 准备一个被挂载元素
  • 创建Vue对象,并挂载相应的元素
    浅学vue_第2张图片
  1. 简单的一个实例挂载el的标签。
    该标签可以通过id、class、标签挂载,建议使用id挂载



    
    Title
    
    



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



    
    Title
    
    


    
     
{{message}}
{{user}}
{{user.name}}
{{hobbys}}
{{hobbys[0]}}

浅学vue_第3张图片
4. Vue中的methods方法详解

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



    
    Title
    
    


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

浅学vue_第4张图片
5. vue数据双向绑定体验

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



    
    Title
    


    

{{username}}

>

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

四、vue的表达式

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




    
    Title
    


    
{{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_第7张图片

五、vue的指令

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



    
    Title
    


    
    
原来张三在玩蛇
原来张三在玩蛇

浅学vue_第8张图片

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



    
    Title
    


    
    
  • {{v}}

  • {{i}} - {{v}}

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

  • {{v}}

  • {{v}}

浅学vue_第9张图片
3. v-for指令的案列:
用v-for写一个学生列表




    
    Title
    



    
编号 姓名 性别 年龄 部门
{{v.id}} {{v.name}} {{v.sex?"男":"女"}} {{v.age}} {{v.dept?v.dept.name:""}}

浅学vue_第10张图片
4. v-show指令:
是否显示数据,(为false时,数据还在,只是看不见而已)




    
    Title
    



    
张三游泳
  1. v-if指令
    v-else-if 和v-else



    
    Title
    


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



    
    Title
    


    
    


浅学vue_第11张图片
7. v-bind指令的案列
使用v-for指令和v-bind指令联合起来做一个下拉框。并还要拿到下拉框的id




    
    Title
    


    
    

浅学vue_第12张图片
8. v-model指令
上面有将这个双向绑定,就不多做解释




    
    Title
    


    
    
{{inputVal}}
性别: 女 {{sexVal}}
爱好: 打篮球 游泳 踢足球 打羽毛球 {{hobbyVal}}
四川省: {{selectVal}}
{{textareaVal}}

浅学vue_第13张图片
9. v-on指令
事件的绑定。
标准形式: v-on:事件类型=“方法名()”
简便形式:@事件类型=“方法名()”




    
    Title
    


        
    


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

  1. 全局组件
    定义在vue对象外面,在挂载了vue对象上的html标签中,都可以使用:
  • 一定要先定义组件,再进行vue的挂载
  • 模板中必需有一个根标签,否则没有效果
  • 取名的问题: 如果使用驼峰命名法 myTag ->



    
    Title
    


	
    

浅学vue_第14张图片
2. 局部组件
定义在vue对象中,只能在挂载的html标签中使用;




    
    Title
    


    
    

浅学vue_第15张图片
3. 全局组件和局部组件的区别
全局组件可以作用于全局的挂载对象;
局部组件:只能作用于挂载的当前对象;

结语:vue加强篇点击进入

你可能感兴趣的