Vue基础使用

一定不晚睡啊
已于 2022-12-22 23:42:21 修改
阅读量144
点赞数
文章标签： vue.js
于 2022-12-22 23:38:45 首次发布
本文链接：https://blog.csdn.net/weixin_45080497/article/details/128414932
版权
<body>
    <!-- demo -->
    <div id="app">
        {{message}}
    <br>
    <hr>
    <!-- v-bind指令,单向数据绑定 简写形式为 :-->
    <h1 :title="message">
            {{content}}
    </h1>

    <!-- 双向数据绑定 -->
        <input type="text" v-model ="searchMap.keyWord"/>
        <p>可以把输入的数据赋值给变量:{{searchMap.keyWord}}</p>

    <!-- 事件 -->
    <p>事件v-on 简写为:@事件名{{result}}<button @click="search()">事件按钮</button></p>

    <!--修饰符 .列如.prevent,阻止事件默认行为 可以和@(v-on事件绑定来使用@submit.prevent="onsubmit"(提交事件触发onsubmit方法))-->
    <p>修饰符 .列如.prevent,阻止事件默认行为 可以和@(v-on事件绑定来使用@submit.prevent="onsubmit"(提交事件触发onsubmit方法))</p>
    <form action="save" @submit.prevent="onsubmit">
        <label for="username">
            <input type="text" id="username" v-model="user.username" />
            <button type="submit">保存</button>
        </label>
    </form>
    <hr>
    <p >`!简单的条件渲染`</p>
    <!-- 条件渲染 v-if(每次切换都会销毁对象,切换开销大),v-show(开局全部渲染(初始化开销大),简单基于css进行切换显示或者隐藏) -->
    <p v-if="true">你好啊v-if</p>
    <p v-else>你好啊v-else</p>
    <p v-show="false">你好啊v-show</p>
    <p v-show="true">你好啊v-show</p>
    <!-- 列表渲染 -->
    <hr>
    <ul>
        <li>简单的v-for列表渲染</li>
        <li v-for = "n in 5">{{n}}</li>
    </ul>

    <ul>
    <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
    <li>简单的v-for + 获取索引渲染</li>
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
    </ul>

    <!-- 列表渲染-遍历数据列表 -->
    <table border="1">
        <tr v-for="item in userList">
            <th>{{item.id}}</th>
            <th>{{item.username}}</th>
            <th>{{item.age}}</th>
        </tr>
    </table>
    <p>加入索引的v-for遍历</p>
    <table border="1">
        <tr v-for="(item,index) in userList">
            <th>索引:{{index}}</th>
            <th>id:{{item.id}}</th>
            <th>姓名:{{item.username}}</th>
            <th>体重:{{item.age}}</th>
        </tr>
    </table>

    <hr/>

    <!-- 组件(component)! -->
    <!-- 局部组件,当前页面可用 -->
    <p>组件components:{组件名字:{template:'组件内容'}}</p>
    <Navbar>局部组件使用</Navbar>
    <!-- 全局组件: -->
    <p>全局组件,需要封装到一个js文件中,使用:引入封装的js标签如何使用</p>
       <zujian></zujian>
        <hr></hr>
    <!-- vue的生命周期 -->
    <p>vue的生命周期</p>
    <ul>
        <li>创建时的四个生命周期</li>
        <li>beforeCreate() {  第一个被执行的钩子方法：实例被创建出来之前执行,执行时data 和 methods 中的 数据都还没有没初始化</li>
        <li>created() {  第二个被执行的钩子方法,created执行时data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作</li>
        <li>beforeMount() {  第三个被执行的钩子方法, beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中</li>
        <li>mounted() {  第四个被执行的钩子方法,内存中的模板已经渲染到页面，用户已经可以看见内容</li>
    </ul>
    <p>运行中的两个事件</p>
    <ul>
        <li>beforeUpdate() {  数据更新的前一刻,beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染</li>
        <li>updated() { updated执行时，内存中的数据已更新，并且页面已经被渲染</li>
    </ul>
    <hr></hr>
        <hr></hr>
        <p>axios请求:axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端,在浏览器中可以帮助我们完成 ajax请求的发送,在node.js中可以向远程接口发送请求</p>

    </div>

    <!-- 路由 -->
    <div id="ap">
        <!-- 路由,Vue.js 路由允许我们通过不同的 URL 访问不同的内容可以实现多视图的单页Web应用 Vue.js 路由需要载入 vue-router 库 -->
<p>路由,通过不同的 URL 访问不同的内容,实现多视图的单页Web应用,Vue.js 路由需要载入 vue-router 库</p>
<p> 使用 router-link 组件来导航.</p>
<p> 通过传入 `to` 属性指定链接地址. </p>
<p> router-link 默认会被渲染成一个 `a` 标签 </p>    
    <p>
        <router-link to="/welcome">欢迎页面</router-link>
        <router-link to="/student">学生页面</router-link>
        <router-link to="/teacher">老师页面</router-link>
    </p>


    </div>




    <!-- 引入vue.js -->
    <script src="vue.min.js"></script>
       <!-- 引入全局组件 -->
       <script src="zujian/zujian.js"></script>
       <!-- 引入 vue-router.js库-->
       <script src="vue-router.min.js"></script>
       <!-- 引入axios.js -->
       <script src="axios.min.js"></script>



    <script>
        new Vue({
            el: '#app',
            components:{
                //定义局部组件
                //组件名字
                'Navbar':{
                    //组件的内容
                    template:'<ul><li>局部组件</li><li>组件使用<组件名字></li></ul>'
                }

            },
            data: {
                message:'单向数据绑定v-bind 简写为 :,页面加载于 ' + new Date().toLocaleString(),
                content:"vue基础",
                searchMap:{keyWord:'双向数据绑定v-model'},
                result:{},
                user:{},//username属性可以声明也可以先不用声明
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                     ],
                     List: []//axios使用的数组
            },
            created() {//(生命周期)vue创建之后
                     this.getList()
            },
            methods:{
                search(){
                    this.result={
                        "title":"事件按钮:v-on(进行事件处理):click(绑定鼠标点击事件)简写为 @click(绑定click单击事件)"
                    }
                },
                onsubmit(){
                    
                        alert('表单不让提交了')
                },
                //发送axios请求方式
                     async getList() {
                    let {data: result} = await axios.get("http://localhost:8201/admin/hosp/hospitalSet/findAll")
                    console.log(result);
        }
            }
        })
    </script>

<script>
    // 路由,定义三个视图:
     // 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎光临,里面可以嵌套其他abcd....标签</div>' }
const Student = { template: '<div>这里是学生页面</div>' }
const Teacher = { template: '<div>这里是教师页面</div>' }
    // 2. 定义路由
// 定义路径和视图的对应关系,每个路由应该映射一个组件。
const routes = [
   //{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
    { path: '/welcome', component: Welcome },
    { path: '/student', component: Student },
    { path: '/teacher', component: Teacher }
]
     // 3. 创建 router 实例，然后传 `routes` 配置(刚才创建的对应关系放这里)
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes..简写前提 k:v同名
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const ap = new Vue({
    el: '#ap',
    router
})
   </script>

</body>