1. 前端框架

免除JS中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，编程重点放在数据上

<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">超链接1</a>
        <a :href="url">超链接2</a>
        <input type="text" v-model="url">
        <input type="button" value="按钮" v-on:click="handle()">
        <input type="button" value="按钮" @click="handle()">
		
        年龄<input type="text" v-model="age">经判定为：
        <span v-if="age<=35">年轻人</span>
        <span v-else-if="age>35 && age<60">中年人</span>
        <span v-else>老年人</span>
        <!-- show都会展示在控制台，vif只展示渲染的 -->
        <span v-show="age<=35">年轻人</span>
		
        <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
		
	<!-- 表格案例 -->
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user, index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-show="user.gender==1">男</span>
                    <span v-show="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=90">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el:"#app",              //vue接管区域
        data:{
            //bind或者model必须在数据模型中声明
            url:"https://www.bilibili.com"，
            age:20，
            addrs:['北京','上海','南昌','杭州']，
            users:[{
                name:"TOM",
                age:20,
                gender:1,
                score:78
            },{
                name:"Rose",
                age:18,
                gender:2,
                score:86
            },{
                name:"Jerry",
                age:26,
                gender:1,
                score:90
            },{
                name:"Tony",
                age:30,
                gender:1,
                score:52
            },
        ]
        },
        methods: {
            handle:function(){
                alert('点击了')
            }
        },
        mounted() {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

指令	作用
v-bind	标签绑定属性值，如href，css样式
v-model	表单元素创建双向数据绑定
v-on	标签绑定事件
v-if
v-else-if	true时渲染
v-else
v-show	根据条件展示某元素，切换display属性值
v-for	列表渲染，遍历容器元素

生命周期：一个对象从创建到销毁的整个过程
八个：beforecreate，created，beforeMount，Mounted，beforeUpdate，updated，beforeDestory，Destroyed

posted on 2023-10-12 10:51 dzw9 阅读(21) 评论(0) 收藏举报

刷新页面返回顶部