前端发展、vue入门、插值语法、指令系统之文本指令、事件指令、属性指令

前端发展介绍

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

ECMA标准

JavaScript=ECMA+bom+dom

Ajax的出现

后台发送异步请求，Render+ajax混合

Vue的快速使用

定义

Vue：是一套用于构建用户界面的渐进式框架

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

工具

Vscode:微软，轻量级编辑器，免费
vim：装插件，搞得花里胡哨，开发代码
Jetbrains:IDEA(java)，Pycharm，Goland，phpStrom，webstorm 收费吃内存(java开发)
AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
sun：java---》后来被甲骨文收购了--->oracle jdk openjdk 毕昇jdk
Pycharm + 插件开发vue 使用起来跟webstorm(需要把vue的源代码下载到本地或者使用cdn)

M-V-VM思想

MTV:django
MVC后端框架一般基于这种架构
MVVM:前端框架vue
MVP:移动端

组件化开发、单页面开发

组件化开发：有自己独立的html、css、js

单页面应用(spa):只有一个html页面

<body>
    <div id="app">
        <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:'jason',
            age:'30'
        }
    })
</script>

插值语法

<body>
    <div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>
        <p>{{hobby[1]}}</p>
        <p>{{wife.name}}</p>
        <p>{{wife['age']}}</p>
        <p>{{100>100?'true':false}}</p>
        <p>标签:{{a}}</p>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'jason',
            age:'30',
            hobby:['football','basketball','read'],
            wife:{
                name:'刘亦菲',
                age:'30'
            },
            a:'<a href="http://www.baidu.com">点我进百度</a>'
        }
    })
</script>

指令系统之文本指令

写在任意标签上以v-xx开头的，都是vue的指令

文本指令

v-text:把变量渲染到标签中，如果之前有数据，覆盖掉
v-html:如果是标签字符串，会把标签渲染到标签内
v-show:控制标签的显示与隐藏，但是它是通过style的display控制的:style="display:none;"
v-if:控制标签的显示与隐藏，但是它是通过dom的增加和删除

代码演示

<body>
    <div id="app">
        <p v-text="name">xxx</p>
        <p v-html="a"></p>
        <img v-show="show" src=" https://img1.baidu.com/it/u=3662873518 ,2526216637&fm=253&fmt=auto&app=138&f=PNG?w=960&h=339" alt="">
        <img v-if="show1" src=" https://img1.baidu.com/it/u=3662873518 ,2526216637&fm=253&fmt=auto&app=138&f=PNG?w=960&h=339" alt="">
        <button @click="handleShow">确定</button>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            a:'<a href="http://www.baidu.com">点我进百度</a>',
            show:true,
            show1:true
        },
        methods:{
            handleShow(){
                this.show=!this.show
            }
        }
    })
</script>

指令系统之事件指令

放在标签上:v-on:事件名='函数名'

事件名可以写:click,dbclick,input标签：change,blur,input

补充

var name='jason'
var age=20
var obj={name:name,age:age}
# 可以简写成
var obj={name,age}

v-on:事件名='函数'，简写成@事件名='函数'

<body>
    <div id="app">
        <button @click="handleShow">点我显示消失</button>
        <br>
        <img v-if="show" src=" https://img0.baidu.com/it/u=2784285649 ,2418102841&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=277" alt="" width="100px" height="100px">
        <br>
        <button @click="handleClick">事件不传参数按钮</button>
        <br>
        <button @click="handleClick1(show)">事件传参数按钮</button>
        <br>
        <button @click="handleClick2('mack')">事件传一个但是需要三个参数</button>
        <br>
        <button @click="handleClick3($event,'jason')">带事件参数按钮</button>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods: {
            handleShow(){
               this.show=!this.show 
            },
            /*函数需要参数，但是没传，默认会把event事件传入
                PointerEvent,对象
            */
            handleClick(a){
                console.log(a)
            },
            /*
             需要一个参数，传了一个，但是需要穿数字，字符串，布尔，或变量
            */
            handleClick1(a){
                console.log(a)
            },
            handleClick2(a,b,c){
                console.log(a)
                console.log(b)
                console.log(c)
            },
            /*
            带事件参数，需要传入：$event
            */
            handleClick3(event,name){
                console.log(event)
                console.log(name)
            }
        },
    })
</script>
</html>

指令系统之属性指令

所谓属性就是：name,class,href,src,id......属性

属性指令：v-bind:属性名='变量'

可以简写成：:属性名="变量"

<body>
    <div id="app">
        <img :src="dog_url1" alt="" width="200px" height="200px">
        <button @click="handleChange">点击更换图片</button>
        <button @click="handleChange1">点击更换图片1</button>
        <img :src="dog_url3" alt="" width="200px" height="200px"> 
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            dog_url1:' https://img0.baidu.com/it/u=3517092237 ,643996232&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=411',
            dog_url2:' https://img0.baidu.com/it/u=1475241698 ,2719525809&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500',
            dog_list:[
                ' https://img1.baidu.com/it/u=538650369 ,3826684397&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                ' https://img1.baidu.com/it/u=3866320064 ,995069430&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                ' https://img0.baidu.com/it/u=3517092237 ,643996232&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=411',
                ' https://img0.baidu.com/it/u=1475241698 ,2719525809&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500',
                ' https://img0.baidu.com/it/u=19017264 ,1357095883&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=539'

            ],
            dog_url3:' https://img0.baidu.com/it/u=3517092237 ,643996232&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=411'

        },
        methods: {
            handleChange(){
                this.dog_url1=this.dog_url2
            },
            handleChange1(){
                /*
                js中随机模块:Math中的random方法为取0到1的小数
                Math.floor()取整
                */
                i=Math.floor(Math.random()*this.dog_list.length)
                console.log(i)
                this.dog_url1=this.dog_list[i]
            },
        },
        mounted() {
            console.log(123)
            // 页面加载完，开启一个定时器，每隔3s走函数代码
            setInterval(()=>{
                i=Math.floor(Math.random()*this.dog_list.length)
            console.log(i)
            this.dog_url3=this.dog_list[i]
            },1000)
        },
    })
</script>

posted @ 2022-10-24 16:31 荀飞阅读(112) 评论(0) 收藏举报

刷新页面返回顶部