2020-12-14 vue 基础语法

今日内容：

0、前端目前形式

-1、html5，css3，js（es5，es6）：写一个一个的页面---》给后端（php，python，go，Java）---》后端嵌入模板语法---》后端渲染完---》返回给前端---》在浏览器中看
-2、ajax出现---》后台发异步请求，render+Ajax混合（bbs项目）
-3、但用Ajax（加载数据，dom渲染页面）：前后端分离的雏形
-4、agular：js框架，前端工程化，前端也是一个工程，一个项目
-5、react，vue：当下最火的两个前端框架（vue是国人写的，国人用的多，react外国用的多）
-6、移动开发（安卓，ios）+web（web，微信小程序，支付宝小程序）+桌面应用开发（Windows桌面）：前端---》大前端，这些都叫前端
-7、一套代码在各个平台运行（前端）：谷歌flutter（Dart：跟Java很像）：iOS，安卓，桌面
-8、在vue框架的基础上nui-app：https://uniapp.dcloud.io/一套代码编到10个平台，这不是梦想。
-9、在不久的将来，一统天下
-10、内卷化

1、vue介绍和使用

-1、渐进式JavaScript：JavaScript的框架（jq），用于构建用户界面的渐进式框架。写简单的可以使用vue，写复杂的项目也可以使用。
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
vue特点：
    -易用：通过HTML，css，JavaScript构建应用
    -灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
    -高效：20kb min+gzip运行大小，超快虚拟DOM，最省心的优化
三大主流框架
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发。
-2、MVVM：model-View-ViewModel
    -model：数据（后端给的，js接收到）
    -ViewModel：中转（双向数据绑定：js中变量变了，html中数据也跟着变）
    -View：视图（html+css）
-3、组件化开发，单页面开发
-4、版本：1.x  2.x（用的多）3.x（beta版本）
-5、下载：（可以使用cdn）
    -开发版本：vue.js :https://vuejs.org/js/vue.js
    -生产本本：vue.min.js :https://vuejs.org/js/vue.min.js
-6、前端开发：webstorm，sublinetext，vscode（python，Java，go，前端，免费），pycharm
-7、快速使用
见如下代码

    
    
    



    {{name}}

2、模板语法

-1、插值语法：{{ js比那辆或js语法 }}
-2、代码演示

    
    
    




    
{{name}}
    
{{age}}
    
{{ll}}
    
{{obj}}
    {{10+20+90}}
    {{10<20?'是':'否'}}

3、指令

3.1 v-html，v-text，v-show，v-if

-1、标签属性为v-xx的形式，是vue的指令
-2、常用指令
    v-html：让html渲染成页面
    v-text：标签内容显示js变量对应的值
    v-show：放一个布尔值，为真，标签就显示，为假标签就不显示，为假时是加了display：none的样式，把标签隐藏起来了。
    v-if：放一个布尔值，为真，标签就显示，为假标签就不显示，为假时是直接把标签删了
-3、v-show和v-if的区别： v-show标签还在，不显示了，v-if直接操作的dom把标签删除和加入
-4、代码显示

    
    
    




    

    
v-text
    我是span标签
    {{name}}
    

    
v-show
    
我是div
    
小案例，控件通过按钮控制显示和消失
    点我
    
我是div
    
v-if
    
我是divdivdiv

3.2事件指令

-1、点击事件：给标签（控件）绑定函数，点击执行函数
-2、v-on：click  ：缩写成@click
-3、$event:是个显示详细坐标的事件

    
    
    






    v-on:点我
    
    @click点我2
    
    点我3带括号
    
    点我4带参数
    
    点我5带事件参数

3.3属性指令

-1、给标签属性的value绑定成js的变量
-2、v-bind：class='js变量' 缩写成 :class='js变量'

    
    
    
    





    
    
    


    点我变色

    

        我是一个div
    

4、style和class

-1、通v-bind控制style和class的显示
    class 添加多个属性的话就是忘列表里家属性，但是js里称为数组
    // class_obj: 'red', //放一个是字符串
    // class_obj: ['red'],  //放多个是数组
    数组.push()  从尾部加一个元素
    数组.pop()   从尾部弹出一个元素
    style 添加多个样式是往字典里加，js里称为对象，
    //对象写法
        style_obj:{
            background:'yellow',
            fontSize:'30px'
        }
    修改或者增加style的样式：
    this.style_obj['fontSize']='30px'

代码：

    
    
    
    








    点击，字体变大
    

        我是div控件