Vue

渐进式JavaScript框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

1.什么是vue    可以独立完成前后端分离式web项目的javascript框架    js渐进式框架：一个页面小到变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目2.为什么要学习vue    三大主流框架之一：Augular React Vue    先进的前端设计模式:MVVM    可以完全脱离服务器端，以以前端代码复用的方式渲染整个页面：组件化开发    3.vue如何做到一次引入控制整个项目 => 单页面应用 =>vue基于组件的开发    #vue的工作原理：单一页面，根据Vue逻辑判断，更换组件进行渲染，实现类似网页跳转的动作，无需发送请求。通常对移动端的优化(实现移动端高效运行H5页面)    #vue的组件概念：也是vue示例，它是vue.js最强大的功能之一，是可扩展的html元素，是封装可重用的代码，可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子。    #vue路由的概念：前端有专门的js文件，一个个链接与组件的对应关系    #vue的ajax概念：在vue里叫做axios

Vue的优点

1.单页面：高效2.虚拟DOM：页面缓存3.数据的双向绑定：数据具有监听机制4.数据驱动：从数据出发，不是从DOM出发

Vue的使用

1.下载vue.js：https://vuejs.org/js/vue.js2.在要使用vue的html页面通过script标签引入3.在html中写挂载点的页面结构，用id表示4.在自定义的script标签实例化Vue对象，传入一个自定义大字典5.在字典中通过 el与挂载点页面结构绑定，data为其提供数据

    
        vue初识
     
         
            
     {
    { h1_msg }}
        
     {
    { h2_msg }}

vue完成简单的事件


        
     h1的内容是{
    { msg }}

vue操作简单样式


        
     点击p文字颜色变为绿色
    
     
      点击div文字颜色变为绿色

小结

"""1.vue通过 v-* 指令来控制标签2.vue通过 变量 来驱动页面  """

指令

文本指令

事件指令


        
         
     {
    { msgs[0] }}
       
     {
    { msgs[1] }}
    
         
             
      列表项1
        
      列表项2
        
      列表项3
    
     
    
         
     
      func1
     
    
         
     
      func2

属性指令

表单指令


        
         
             
              
              
                  
                   
                   
               
      
        
              
                  
                   
                   男：
                   女：
                   {
    { ra_val }}        
      
        
              
              
              
                  
                   {
    { sin_val }}        
      
        
              
              
                  
                   
                   
                   {
    { more_val }}

条件指令

循环指令


        
     {
    { nums[2] }}
    
             
              
      {
    { num }}
    
     
    
             
              
      {
    { num }} {
    { index }}
    
     
    
             
              
      {
    { v }} {
    { k }} {
    { i }}

评论案例


        
                         
    
             
                  {
    { info }}            x

解决插值表达式符号冲突


    
         ${ msg }

总结

指令：    文本:{
    {}} v-text v-html v-once    属性: v-bind:href | :href :class='c1' :class='[c1,c2]' :style='s1'    (s1={color:'red'})    事件:v-on:click | @click @click='action' @click='action(msg)' @click='action($event)'    表单:v-model    条件:v-show v-if v-else-if v-else    循环:v-for='(value,index) in list' v-for='(value,key,index) in dict'    成员:    el:挂截点    data:数据    methods:方法    computed:计算 -- 监听方法内所有的变量，返回值绑定的变量，该变量无需在data中声明    watch:监听 --监听绑定的变量，绑定的变量必须在data中声明

转载于:https://www.cnblogs.com/Mr-bear/articles/11102735.html

你可能感兴趣的文章