【vue2】 vue2使用与文本、事件、属性指令

1. 前端发展史

1. HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
    # ECMA标准
    #JavaScript=ECMA+bom+dom
2. Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
3. 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
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端
8. 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
9. Vue:2.x  3.x
       -ts:typescript
       -less
(在不久的将来 ，前端框架可能会一统天下)

# 主流：vue，react 、uni-app 、typescript

详细的发展史：https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

2. Vue介绍和基本使用

2.1 Vue介绍

1. Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
   与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
   Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
2. 渐进式框架
   可以一点一点地使用它，只用一部分，也可以整个工程都使用它
3. 网站
   官网：https://cn.vuejs.org/
   文档：https://cn.vuejs.org/v2/guide/
4. 编辑器
   vscode：微软 轻量级编辑器，免费
   vim：装插件，搞得花里胡哨，开发代码
   Jetbrains:IDEA(java)，Pycharm，Goland，phpStrom，webstorm   收费 吃内存(java开发)
   AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
   sun：java---》后来被甲骨文收购了--->oracle jdk   openjdk  毕昇jdk
   Pycharm + 插件  开发vue 使用起来跟webstorm
   把vue的源代码下载到本地

2.2 Vue特点

1. 易用：通过 HTML、CSS、JavaScript构建应用
2. 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
3：高效：20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化

2.3 M-V-VM思想

1. 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中数据也跟着改变）
2. MVVM的特性
   低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
   可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
   独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
   可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写
3. MTV :django
   MVC :后端框架一般基于这种架构
   MVVM:前端框架 vue
   MVP：移动端

2.4 组件化开发、单页面开发

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

2.5 版本

1.X：使用得较少
2.X：普遍使用
3.X：刚出没多久，只有Beta版

2.6 引入方式

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>

2.7 补充

1. 解释型的语言是需要解释器的
   js就是一门解释型语言，只不过js解释器被集成到了浏览器中
   所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
2. nodejs: 一门后端语言
   把chrome的v8引擎（解释器），安装到操作系统之上

2.8 快速使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue快速使用</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>
</body>
<script>
    // 引入vue后，会有Vue的构造函数，传入配置项对象
    // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
    var vm = new Vue({
        el: "#app",
        data:{
            name:'zhy',
            age:18
        },
    })
</script>
</html>

3.插值语法

//被vue托管的标签中可以写{{}} 中可以写：变量，js简单的表达式，函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue插值渲染变量</h1>
    <p>名字：{{name}}</p>
    <p>年龄：{{age}}</p>
    <p>爱好：{{hobby}}</p>
    <P>第0个爱好：{{hobby[0]}}</P>
    <p>wife:{{wife}}</p>
    <p>wife的名字：{{wife['name']}}</p>
    <p>wife的年龄：{{wife.age}}</p>
    <p>标签：{{a}}</p>
    <h1>vue插值渲染简单表达式</h1>
    <p>{{10>9?'大于':'小于'}}</p>
    <p>{{age+1}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'zhy',
            age: 18,
            hobby: ['唱', '跳', 'rap'],
            wife: {name: '张三', age: 20},
            a: '<a href="http://www.baidu.com">点我</a>'
        },
    })
    // 三目运算符---》三元表达式
    // var a = 10 > 9?'大于'：'小于'

</script>
</html>

4. 指令系统之文本指令

4.1 文本指令

写在[任意]标签上 以  v-xx  开头的，都是vue的指令
文本指令
    v-text:把变量渲染到标签中，如果之前有数据，覆盖掉
    v-html:如果是标签字符串，会把标签渲染到标签内
    v-show:控制标签的显示与隐藏，但是它是通过style的display控制的：style="display:none;",放1个布尔值：为真 标签就显示；为假 标签就不显示
    v-if:控制标签的显示与隐藏，但是它是通过dom的增加和删除,放1个布尔值：为真 标签就显示；为假 标签就不显示

4.2 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令 v-text</h1>
    <p v-text="name">张三</p>
    <h1>文本指令 v-html</h1>
    <span v-html="a"></span>
    <h1>文本指令 v-show</h1>
    <img v-show="b" src="http://pic.imeitou.com/uploads/allimg/220921/3-2209211I241-50.jpg" alt="" width="300px" height="300px">
    <h1>v-if</h1>
    <div v-if="b1">
        <a href="">点我看美女</a>
        <h3>美女</h3>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:'zhy',
            a:'<a href="http://www.baidu.com">点我</a>',
            b:true,
            b1:true
        },
    })
</script>
</html>

5. 指令系统之事件指令

5.1 事件指令

放在标签上：v-on:事件名='函数'
事件名可以写：click,dbclick, 
input标签:change,blur,input
补充：es6 对象写法
    var name = 'lqz'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {name, age, handleClick() {}}
    
v-on:事件名='函数'(不推荐使用)  简写成  @事件名='函数'(推荐使用)
@[event]：触发event事件（可以是其他任意事件）

5.2 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
      <h1>事件指令</h1>
      <button v-on:click="handleShow">点我显示消失</button>
      <div v-show="show">  <!-- 也可以用v-show-->
          <img src="http://pic.imeitou.com/uploads/allimg/220921/3-2209211I241-50.jpg" alt="" width="300px" height="300px">
      </div>
      <h1>事件指令函数带参数</h1>
      <button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button>
      <br>
      <button @click="handleClick1('zhy')">函数需要参数，但是传值了</button>
      <br>
      <button @click="handleClick2('zhy')">函数需要3参数，但是传了1个</button>
      <br>
      <button @click="handleClick3($event,'zhy')">函数需要2参数，一个事件，一个字符串</button>
  </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            show:true,
        },
        methods:{
            // handleShow:function (){
            //     // this 就是vm对象 vm.show
            //     this.show=!this.show
            // },
            // // es6的语法，对象写法，以后都这样写
            handleShow(){
                // this 就是vm对象 vm.show
                this.show = !this.show
            },
            // 需要一个参数，但是没有传，会把事件传入
            handleClick(a){
                console.log(a)
                alert('帅哥')
            },
            // 需要1个,传入一个，但是需要传数字，字符串，布尔，或变量
            handleClick1(name){
              console.log(name)
            },
            // 需要3个参数，传入一个，没问题，后面俩都是 undefined
            handleClick2(a,b,c){
                console.log(a)
                console.log(b)
                console.log(c)
            },
            handleClick3(event,name){
                console.log(event)
                console.log(name)
            }
        }
    })
</script>
</html>

6. 指令系统之属性指令

6.1 属性指令

写在标签上的name,class,href,src,id.....属性
v-bind:属性吗明='变量'
简写成：
    v-bind:属性名='变量'(变量)   ：属性名='变量'

6.2 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>属性指令</h1>
    <button @click="handleClick">点我看美女</button>
    <br>
    <img v-bind:src="url" alt="" width="300px" height="300px">
    <hr>
    <button @click="handleChange">点我换美女</button>
    <br>
    <img v-bind:src="img_url" alt="" width="300px" height="300px">
    <!--    <img :src="img_url" alt="" width="300px" height="300px">-->
    <hr>
    <img v-bind:src="img_url2" alt="" width="300px" height="300px">
    <!--    <img :src="img_url2" alt="" width="300px" height="300px">-->
    <hr>

    <div :id="id_div">
        <h1>我是div</h1>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: 'http://pic.imeitou.com/uploads/allimg/220921/3-2209211I241-50.jpg',
            img_url: 'http://pic.imeitou.com/uploads/allimg/220921/7-220921110633-lp.jpg',
            img_url2: 'http://pic.imeitou.com/uploads/allimg/220921/3-2209211F537.jpg',
            imgList: ['https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg',
                'http://pic.imeitou.com/uploads/allimg/220921/3-2209211H123.jpg',
                'http://pic.imeitou.com/uploads/allimg/220921/3-2209211F537.jpg',
                'http://pic.imeitou.com/uploads/allimg/221019/8-221019101215-lp.jpg',
                'http://pic.imeitou.com/uploads/allimg/221013/8-221013093447-lp.jpg'],
            id_div: 'zzz'
        },
        methods: {
            handleClick() {
                this.url = 'http://pic.imeitou.com/uploads/allimg/220921/7-220921110633-lp.jpg'
            },
            handleChange() {
                // floor:只取整数部分
                // Math.random()生成0--1直接的数字，小数
                var i = Math.floor(Math.random() * this.imgList.length)
                console.log(i)
                this.img_url = this.imgList[i]
            }
        },
        mounted() {
            // 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
            setInterval(() => {
                var i = Math.floor(Math.random() * this.imgList.length)
                this.img_url2=this.imgList[i]
            }, 1000)
        }
    })
</script>
</html>

posted @ 2022-10-24 20:56 |相得益张| 阅读(204) 评论(0) 收藏举报

刷新页面返回顶部

|相得益张|

人而不学其犹正墙面而立

【vue2】 vue2使用与文本、事件、属性指令

1. 前端发展史

2. Vue介绍和基本使用

2.1 Vue介绍

2.2 Vue特点

2.3 M-V-VM思想

2.4 组件化开发、单页面开发

2.5 版本

2.6 引入方式

2.7 补充

2.8 快速使用

3.插值语法

4. 指令系统之文本指令

4.1 文本指令

4.2 案例

5. 指令系统之事件指令

5.1 事件指令

5.2 案例

6. 指令系统之属性指令

6.1 属性指令

6.2 案例

公告

|相得益张|

人而不学 其犹正墙面而立

【vue2】 vue2使用与文本、事件、属性指令

1. 前端发展史

2. Vue介绍和基本使用

2.1 Vue介绍

2.2 Vue特点

2.3 M-V-VM思想

2.4 组件化开发、单页面开发

2.5 版本

2.6 引入方式

2.7 补充

2.8 快速使用

3.插值语法

4. 指令系统之文本指令

4.1 文本指令

4.2 案例

5. 指令系统之事件指令

5.1 事件指令

5.2 案例

6. 指令系统之属性指令

6.1 属性指令

6.2 案例

公告

人而不学其犹正墙面而立