实训第一天

骑士是个大叔

已于 2023-06-19 15:38:54 修改

阅读量89

点赞数

分类专栏： vue实训文章标签： vue.js

于 2023-06-19 14:43:14 首次发布

本文链接：https://blog.csdn.net/qq_52179028/article/details/131287597

版权

vue实训专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01.vue的基础介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 胡子语法,存储的是在data里面定义的属性 -->
      {{msg}}
      <p>{{txt}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue：渐进式框架
    // 特点：视图驱动效果(操作的就是数据)
    let vm = new Vue({
        // 这里可以设置对应的配置项
        el:'#app',
        // 存储页面需要用的数据
        data:{
            msg:'hello world!',
            txt:'我是p标签',
        }
    })
</script>
</html>

02.vue中的常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: rgb(18, 232, 125);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 通过使用指令的方法实现数据的渲染 -->
        <!-- v-text 书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- v-html 书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- 总结: v-text和v-html的区别: v-html可以解析标签 -->
       <div class="div1" v-text="msg"></div>
       <div class="div2" v-html="txt"></div>
       <hr>
       <div class="div1" v-text="tag"></div>
       <div class="div1" v-html="tag"></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue：渐进式框架
    // 特点：视图驱动效果(操作的就是数据)
    let vm = new Vue({
        // 这里可以设置对应的配置项
        el:'#app',
        // 存储页面需要用的数据
        data:{
            msg:'hello world!',
            txt:'我是p标签',
            tag:'<h1>我是标题一</h1>'
        }
    })
</script>
</html>

03.vue中的常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 13, 242);
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: rgb(225, 7, 196);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 通过使用指令的方法实现数据的渲染 -->
        <!-- v-if 书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- v-show 书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- v-if/v-show 作用就是用来显示或者隐藏元素 -->
        <!-- 总结: v-if和v-show的区别: v-if直接移除元素  v-show只是添加隐藏元素的属性-->
       <div class="div1" v-if="isShow"></div>
       <div class="div2" v-show="isShow"></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue：渐进式框架
    // 特点：视图驱动效果(操作的就是数据)
    let vm = new Vue({
        // 这里可以设置对应的配置项
        el:'#app',
        // 存储页面需要用的数据
        data:{
            msg:'hello world!',
            txt:'我是p标签',
            tag:'<h1>我是标题一</h1>',
            isShow:true,
        }
    })
</script>
</html>

04.vue中的常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 13, 242);
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: rgb(225, 7, 196);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 通过使用指令的方法实现数据的渲染 -->
        <!-- v-for 书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- 作用:循环输出你需要的内容 -->
         <div v-html="title"></div>
         <ul>
            <!-- <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li> -->
            <!-- <li v-for="item in arr">{{item}}-----{{arr}}</li> -->
            <!-- 注意：item代表的是数组中的每一项，此时这个item的名字是可以更换的 -->
            <!-- 注意: index这个参数是可以省略的，具体要看你的业务需求 -->
            <li v-for="(item,index) in arr">{{item}}---{{index}}</li>
         </ul>
       
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue：渐进式框架
    // 特点：视图驱动效果(操作的就是数据)
    let vm = new Vue({
        // 这里可以设置对应的配置项
        el:'#app',
        // 存储页面需要用的数据
        data:{
            title:'<h1>你喜欢的水果是什么呢？</h1>',
            arr:['苹果','香蕉','橘子'],
        }
    })
</script>
</html>

05.vue中的常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: rgb(124, 13, 242);
        }
       
    </style>
</head>
<body>
    <div id="app">
        <!-- 通过使用指令的方法实现数据的渲染 -->
        <!-- v-click 的缩写就是: @click 书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- 作用:点击元素实现效果 -->
        <!-- 需求:点击这个按钮让下面的p标签显示或者隐藏 -->
        <!-- 分析：隐藏显示元素需要使用指令 v-show/v-if -->
         <button v-text="btn"  @click = 'change()'></button>
         <p v-show="isShow"></p>
       
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue：渐进式框架
    // 特点：视图驱动效果(操作的就是数据)
    let vm = new Vue({
        // 这里可以设置对应的配置项
        el:'#app',
        // 存储页面需要用的数据
        data:{
            content:'<h1>显示隐藏这个元素</h1>',
            btn:'按钮',
            isShow:false,
        },
        methods:{
            // 点击按钮触发的方法
            change(){
                // 注意:如果你需要操作data中的属性那么你需要使用this.属性名获取
                // 分析：点击按钮，如果p标签显示着，那么就让它变为隐藏，如果p标签默认就是隐藏，那么就让它变为显示
                // !在这里的含义就是取反操作
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</html>

06.vue中的常用指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: rgb(46, 235, 36);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 通过使用指令的方法实现数据的渲染 -->
        <!-- v-bind 的缩写就是: :class   书写位置：在标签中间与书写属性的位置是一致的-->
        <!-- 作用:给元素绑定属性 -->
        <div :class="div12"></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue：渐进式框架
    // 特点：视图驱动效果(操作的就是数据)
    let vm = new Vue({
        // 这里可以设置对应的配置项
        el: '#app',
        // 存储页面需要用的数据
        data: {
            //    绑定元素的类名
            // 此时元素中绑定的类名是下面这组对象中的属性
            div12: 'div1'
        },

    })
</script>

<script>
    // 总结:
    // 1.安装vscode编辑器，配置node环境
    // 2.正确打开vscode的方法
    // 3.vue的基础学习
    //  3-1，找到vue的官网：https://v2.cn.vuejs.org/
    //  3-2，页面中引入<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    //  3-3，指令学习
    //  v-text/v-html: 向页面中输出data中的数据  v-html可以识别标签
    //  v-if/v-show:   控制页面中的元素是否显示隐藏，通过在data中定义变量，控制这个变量的显示隐藏
    //  v-for： 循环输出需要的数据
    //  v-bind: 绑定属性(该属性一定要在data中声明)  简写: :属性->:class
    //  v-on:click 绑定点击事件  简写 @click = '方法名'

    // 注意事项:首先需要创建vue的实例对象叫做vm，vm中定义对应的这个data属性
</script>
<!-- 
    下午内容:
    1.组件使用
    2.路由使用
    3.vue的脚手架使用
 -->
</html>
</script>
</html>

07.vue中组件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-html="msg"></div>
        <v-one></v-one>
        <v-two></v-two>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue中的组件开发
    // 全局组件、局部组件
    // vOne->v-one可以直接回车生成标签  
    Vue.component('vOne',{
        template:'<p>我是注册的全局组件</p>'
    })
    Vue.component('vTwo',{
        template:'<h3>我是注册的全局组件3333</h3>'
    })
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'下午好!'
        }
    })
</script>
</html>

08.vue中组件的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-html="msg"></div>
        <v-one></v-one>
        <v-two></v-two>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue中的组件开发
    // 全局组件、局部组件(位置：在vue实例上创建component)
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '下午好!',
        },
        methods:{},
        // 注意: 如果需要注册的是局部组件，那么书写的位置一定是在实例的配置项中
        components: {
            vOne: {
                template: '<div>我是局部注册的</div>'
            },
            vTwo:{
                template:'<h1>这是标题一</h1>'
            }
        }
    })
</script>

</html>

09.vue中组件的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            /* 取消列表默认样式 */
            list-style: none;
            /* 设置浮动 */
            float: left;
            /* 宽高 */
            width: 100px;
            height: 40px;
            /* 设置元素的垂直水平居中 */
            text-align: center;
            line-height: 40px;
        }
        li:nth-child(1){
            background-color: pink;
        }
        li:nth-child(2){
            background-color: orange;
        }
        li:nth-child(3){
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-html="msg"></div>
        <v-one></v-one>
    </div>
    <!-- 创建组件模板 -->
    <template id="temp1">
        <div>
            <!-- 要书写导航 -->
            <ul>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
            </ul>
        </div>
    </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // vue中的组件开发
    // 全局组件、局部组件(位置：在vue实例上创建component)
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '下午好!',
        },
        methods:{},
        // 注意: 如果需要注册的是局部组件，那么书写的位置一定是在实例的配置项中
        components: {
            vOne: {
                template: '#temp1'
            },
            vTwo:{
                template:'<h1>这是标题一</h1>'
            }
        }
    })
</script>

<!-- 
   组件使用总结:
   1.全局组件
     在vue实例的上面创建Vue.component('组件名称',{ template:'<tag>内容</tag>'})
     全局组件可以创建N多个，但是每次创建需要重复上面的操作
   2.局部组件
     方法一:在vue实例的配置项上创建一个components的配置项,{组件名:{template:'页面内容'}}
     方法二:在vue实例的配置项上创建一个components的配置项,{组件名:{template:"模板id名称"}}
           模板的位置:app的下面新建一个template标签，标签的名字就是模板的id名字
     注意: 一个template中只能有一个根元素

 -->
</html>

骑士是个大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训第一天

- 胡子语法 , 存储的是在data里面定义的属性 -- > {txt } } < / p > < / div > < / body > < script src = "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" > < / script > < script > // vue：渐进式框架 // 特点：视图驱动效果(操作的就是数据) let vm = new Vue({
复制链接

扫一扫

专栏目录