标签：Vue show -- js 指令 vue

Ⅰ Vue初识

【一】前端的发展史

# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合

# 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
	index.html
    login.html
# 4 Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）

# 5 React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

# 6 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端

# 7 一套代码在各个平台运行（大前端）：谷歌Flutter平台（Dart语言：和Java很像）可以运行在IOS、Android、PC端，web
	java：sun--->oracle甲骨文收购了--->收费-->商业需要授权
     openjdk
     毕昇jdk

# 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台

# 9 在不久的将来 ，前端框架可能会一统天下

【二】vue介绍

是一个js框架

【1】什么是vue

# --->用于构建用户界面的js框架
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任

【2】渐进式框架

渐进式:可以一点一点地使用它，只用一部分，也可以整个工程都使用它

# 渐进式 JavaScript 框架 易学易用，性能出色，适用场景丰富的 Web 前端框架
	-可以项目的一部分使用 也可以全项目使用
    -单页应用 (SPA)：signal page application
    	-整个vue项目，只有一个 html页面

【3】网站

官网：https://cn.vuejs.org/
文档：https://cn.vuejs.org/v2/guide/

【4】版本选择（vue2--vue3）

vue2：少量vue2
vue3：公司内 vue3多

【5】Vue特点

易用

通过 HTML、CSS、JavaScript构建应用

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化

【6】单文件组件

#  单文件组件
	-一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件  xx.vue
    -英文名字是Single-File Components:SFC
    -Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里

【7】 API风格

#  API风格
	-组合式：vue3使用它，也兼容配置项API
    -配置项API：vue2使用它

【8】M-V-VM 架构

# MVVM介绍
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

# MVVM的特性
低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写


#  M-V-VM 架构
	-MTV架构风格：Django，本质也是MVC
    	-Model：数据层-->orm-->表模型
        -T：template 就是V ，模板，用户界面
        -V：视图层   django的V+路由= c层:controller控制层
    -MVC架构风格：后端开发的架构风格
    	-Model：数据层-->orm-->表模型
        -V：view视图层，模板，用户界面
        -C:controller控制层：控制逻辑，判断，循环
        
    -MVVM：vue的架构模式
    	M：model数据层   js控制
        v：View视图层     用户看到的页面
        	js的dom操作--->实现 M和V的交互--->原生js操作dom很麻烦
            jquery-->方便js操作dom-->很多年前，jquery非常火
            
        vm：view-model层  介于 view和 Model之间 vue编写的一层--->实现 只要数据发生变化，页面就跟着变，只要页面发生变化，js数据页变
        响应式，以后不用操作dom了，只需要动js的变量即可
    
    -MVP：移动端开发
    
# 渐进式，构建用户界面的js框架，单文件组件SFC,单页面应用：SPA, API 风格:组合式，选项式，MVVM

【9】组件化开发、单页面开发

组件化开发

类似于DTL中的include，每一个组件的内容都可以被替换和复用

单页面开发

只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html

【三】vue初体验（vue2,vue3）

【1】 vue开发，选择编辑器

	-vscode：免费
    -webstorm：jetbrains公司专门用来开发前端的
    -不正经前端开发：goland，pycharm，IDEA开发vue

【2】 jetbrains全家桶

	-IDEA-->为java开发者定制的
    -继续开发出了全家桶：pycharm，goland，clion，phpstorm，webstorm
    -pycanrm-->装vue插件-->跟webstorm一样了

【3】 vue2 初体验

	-一部分用vue--->src方式：cdn引入，本地引入
    -vue项目 install 安装方式

在pycharm上使用

（1）引入方式

1. CDN的方式引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.下载后导入

其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去

<script src="./js/vue.js"></script>

src方式：cdn引入，本地引入

也可以把源码保存到本地再引用

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js2/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div id="app">

<h1>{{name}}</h1>

</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:"hjj"
        }
    })

</script>
</html>

【4】解释型的语言是需要解释器的

js就是一门解释型语言，只不过js解释器被集成到了浏览器中
所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样

nodejs：一门后端语言

把chrome的v8引擎（解释器），安装到操作系统之上

【5】 vue3 初体验

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

vue2与vue3略有不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js3/vue.js"></script>
</head>
<body>
<div id="app">


<h1>{{name}}</h1>

    <span></span>

</div>
</body>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const name = ref('zzq')
      return {
        name
      }
    }
  }).mount('#app')


</script>
</html>

Ⅱ vue的插值语法

语法：{{ 变量、js语法、三目表达式 }}

#   补充：三目运算符语法
var a=条件?'':''
   例如 <p>三目运算符：{{age>=18?"成年":"未成年"}}</p>
# 2 插值语法中 可以放 变量   简单运算   三目运算符   函数()
# 3 标签字符串，无法渲染成标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">


    <p>渲染字符串：{{name}}</p>
    <p>渲染数字：{{age}}</p>
    <p>渲染数组：{{list1}}--->{{list1[1]}}</p>
    <p>渲染对象：{{obj1}}--->{{obj1.name}}</p>
    <p>渲染标签字符串：{{link1}}</p>
    <p>简单js语法：{{9+9}}</p>
    <p>简单js语法：{{age+9}}</p>
    <p>简单js语法：{{name+'_NB'}}</p>
    <p>三目运算符：{{age>=18?"成年":"未成年"}}</p>

    <p v-></p>



</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'silence',
            age: 25, // 数值
            list1: [1, 2, 3, 4],   // 数组
            obj1: {name: 'Darker', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        },
    })


</script>
</html>

Ⅲ vue指令之文本指令

# 1 vue 指令：放在标签上，以v-开头的，都是vue的指令，每个指令有特殊的用途

# 2 文本指令
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真 标签就显示；为假 标签就不显示
v-if	放1个布尔值：为真 标签就显示；为假 标签就不显示

指令	释义
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真标签就显示；为假标签就不显示
v-if	放1个布尔值：为真标签就显示；为假标签就不显示

v-show 与 v-if 的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入标签

【一】代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-html使用</h1>
    <h2 v-html="name"></h2>
    <h2 v-html="link1"></h2>
    <h1>v-text使用</h1>
    <h2 v-text="name"></h2>
    <h2 v-text="link1"></h2>
    <h1>v-show使用</h1>
    <img src="./img/1.jpg" alt="" v-show="is_show" height="80px" width="80px">

    <h1>v-if使用</h1>
    <h3 v-if="is_show_h3">看到我了</h3>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'silence',
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            is_show: true,
            is_show_h3: true,
        },
    })

</script>
</html>

【二】v-show使用

v-show：标签还在，只是不显示了（display: none）

display: none

【三】v-if使用

是真删除，而不是隐藏

Ⅳ vue指令之事件指令

指令	释义
v-on	触发事件（不推荐）
@	触发事件（推荐）
@[event]	触发event事件（可以是其他任意事件）

# 1 事件指令
	-js中有很多事件：点击，双击，滑动，滚动。。。。
    -这么多事件中，只有点击事件用的最多
    
# 2 点击事件
指令     	  释义
v-on:	   触发事件（不推荐）   v-on:click='函数名'  --->定义在methods中
@	       触发事件（推荐）     @click='函数名'  --->定义在methods中   # v-on:click可以缩写成@click
@[event]	触发event事件（可以是其他任意事件）

【一】点击事件–>点击隐藏显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">

    <h1>事件指令</h1>
    <img src="./img/1.jpg" alt="" v-show="is_show" height="380px" width="380px">
    <br>
<!--    <button v-on:click="handleClick">点击-显示或隐藏</button>-->
<!--     v-on:click可以缩写成@click-->
    <button @click="handleClick">点击-显示或隐藏</button>
</div>
</body>



<script>
    var vm = new Vue({
        el: '#app',
        data: {
            age:10,
            is_show: true,
        },
        methods:{
            handleClick:function (){
                // 把data中is_show 取反
                // this代表的是 vm
                this.is_show=!this.is_show
            },
        }
    })


</script>
</html>

【二】事件指令-click-函数传参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件指令-click-函数传参数</h1>

<!--    <button @click="handleDemo1(10,age)">handleDemo1</button>-->
<!--    <button @click="handleDemo1(10,age,19)">handleDemo1-多的参数会忽略</button>-->
<!--    <button @click="handleDemo1(age)">handleDemo1-少的参数会-是undefined</button>-->
<!--    <button @click="handleDemo1">如果不传-函数有变量接收-第一个参数是event事件对象</button>-->
    <button @click="handleDemo1($event,10)">传event事件对象，又要传变量</button>

</div>
</body>



<script>
    var vm = new Vue({
        el: '#app',
        data: {
            age:10,
            is_show: true,
        },
        methods:{
            handleClick:function (){
                // 把data中is_show 取反
                // this代表的是 vm
                this.is_show=!this.is_show
            },
            // handleDemo1:function (a,b){
            //     console.log(a)
            //     console.log(b)
            //     console.log(a+b)
            // },
            handleDemo1:function (event,a){
                console.log(event)
                console.log(a)
            },
        }
    })


</script>
</html>

Ⅴ vue指令之属性指令

指令	释义
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（推荐）

# 1 属性指令 
	-标签都有属性  name  id   src  link href...
    -属性绑定一个变量--->变量变，属性也变
    
    
    
# 2 如何使用
v-bind:    	直接写js的变量或语法（不推荐）
:	        直接写js的变量或语法（推荐）

【一】在控制台修改属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">

    <h1>属性指令</h1>
<!--    <img v-bind:src="img" width="100px"  v-bind:height="height">-->
    <img :src="img" width="100px"  v-bind:height="height">
    <button @click="handleChange">点我换一张</button>
    <br>
    <a :href="link">点我看美女</a>

</div>
</body>



<script>
    var vm = new Vue({
        el: '#app',
        data: {
            height:'120px',
            img:'https://img1.baidu.com/it/u=2156151471,2963783761&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1731',
            link:'http://www.baidu.com'
        },
        methods:{
            handleChange:function (){
                this.img='./img/2.jpg'
            }
        }
    })


</script>
</html>

【一】在控制台修改图片大小

【二】在控制台修改链接地址

点击后跳转博客园

标签：Vue,show,--,js,指令,vue
From： https://www.cnblogs.com/zyb123/p/18346175

Vue初识,vue的插值语法,vue指令之文本指令,vue指令之事件指令, vue指令之属性指令