第21章 0414-vue基础1-PHP课程网总结-前端部分-郭俊杰的知识库

第21章 0414-vue基础1

Data: 2018-02-06 20:38:03Form: JournalClick: 8

问题集合：

1. 安装node出现下图？

答：

2. 请问下这个?

答：插件问题，不必理会

3. 0406表单非空验证例子里，按钮check方法中设了preventDefault后，验证通过后不能跳转到成功页面，如何实现跳转？用submit不行的？

答:既然都使用JS验证了，直接在check中验证完通过异步的方式直接提交到后台即可，这个在前几天的课程中有提到

4. 有什么vue的插件吗?

答：

5. 我用:value做回显时控制台提示会有干扰,这个是正常的么？

答：:value="content"删除即可，v-model就是将input输入和content的值双向绑定 :value就是将input的值跟随content的值的变化(单向)，前者功能与后者有一定重合，所以做出一定的警告。

6. 这个改怎么处理？

答：不影响，忽略

7. 我这个运行不出来？

答：

demo1：静态与动态页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态与动态页面</title>
    <!-- 导入vue3: CDN -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 静态页面: 纯静态 -->
    <h1>Hello world</h1>

    <!-- 动态页面: 模板化静态页面: 动态数据 -->
    <!-- 模板由2部分构成: 
    1. 原样显示的字面量, 字符串, html标签,样式 
    2. 插值: 一个变量/表达式的占位符 -->
    <h1 class="title">{{占位符}}</h1>

    <h1 class="hello">{{message}}</h1>

    <script>
        // es6
        document.querySelector('.title').textContent = 'Hello php.cn';

        // vue
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello 123'
                }
            },
        }).mount('.hello')
    </script>
</body>
</html>

demo2：挂载点,vue实例,数据注入,响应式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挂载点,vue实例,数据注入,响应式</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 1. 挂载点: 当前vue实例的作用域 -->
    <div class="app">
        <p>用户名: {{ username  }}</p>
    </div>

    <script>
        // 2. vue实例
       const app = Vue.createApp(
           // vue实例配置对象,要写到一个{}
           {
               // vue中的变量/数据全部要写到一个data()
           data() {
               // 返回声明在vue实例上的所有变量
               return {
                   username: '张老师',
               }
           },
           }
       ).mount('.app');

       // document.querySelector('.app')  ==> '.app'
             // 将vue实例与挂载点进行绑定
    //    app.mount(document.querySelector('.app'))

    // 3. 数据注入
    console.log(app.username);
    // 完整注入
    console.log(app.$data.username);
    // 访问器属性
    const obj = {
        $data: {
            email: '498668472@qq.com'
        },

        // 访问器属性
        get email() {
            return this.$data.email;
        }
    }

    console.log(obj.email);

    // 4. 响应式,vue实例中的数据,参实时响应外部对数据的更新
    app.username = '马老师'
    </script>
</body>
</html>

demo3：v-html,v-text: 内容填充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html,v-text: 内容填充</title>
     <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app">
        <!-- <p>用户名: {{username}}</p> -->
        <p>用户名: <span v-text="username"></span></p>
        <p>用户名: <span v-html="username"></span></p>
    </div>
    <script>
        // innerHTML -> vue: v-html
        // textContent -> vue: v-text
        const app = Vue.createApp(
           {
            data() {
                return {
                    username: '张老师',
                }
            },
           }
       ).mount('.app');

       app.username = '<i style="color:red">猪老师</i>';

            </script>
</body>
</html>

demo4：样式绑定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定</title>
     <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
      <style>
            .active {
                color: cyan;
            }
        </style>
    <div class="app">
        <!-- 行内 -->
        <p style="color: red">hello world</p>
        <p v-bind:style="style">Hello php.cn</p>
        <!-- 语法糖进行简化: v-bind:属性  ==> : -->
        <p :style="style">Hello php.cn</p>

        <p :style="{color:mycolor, background: mybackground}">Hello php.cn</p>

        <!-- class: 类样式 -->
              <p class="active">大家晚上好</p>
        <p :class="active">大家吃了吗</p>

    </div>
    <script>
          const app = Vue.createApp(
           {
            data() {
                return {
                    style: 'color:red',
                    mycolor: 'blue',
                    mybackground: 'yellow',
                    active: 'active'
                }
            },
           }
       ).mount('.app');
    </script>
</body>
</html>

demo5：双向数据绑定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向数据绑定</title>
        <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- es6 -->
    <p>
        <div>es6:</div>
        <input type="text" oninput="document.querySelector('.res').textContent=this.value">
        <span class="res"></span>
    </p>

    <!-- vue -->
    <div class="app">
        <p>
            <!-- 在vue中, 引用事件对象event,前面必须加$ -->

            <!-- v-on: 事件属性, v-on 可简化  @ -->
            <input type="text" @input="comment = $event.target.value">
            <span>{{comment}}</span>
        </p>

        <!-- 用 v-model -->
        <p>
             <input type="text" v-model="comment" :value="comment">
            <span>{{comment}}</span>
        </p>
        <!-- 延迟响应 .lazy: 失去焦点才响应 -->
         <p>
             <input type="text" v-model.lazy="comment" :value="comment">
            <span>{{comment}}</span>
        </p>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    comment: ''
                }
            },
        }).mount('.app')
    </script>
</body>
</html>

demo6：事件绑定与修饰符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定与修饰符</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app">
        <!--
        v-on: @
        event: $event 
        -->
        <a href="https://www.php.cn/" @click="showUrl($event)">显示网址: </a>
        <span class="url">{{url}}</span>
        <hr>

        <!-- 使用事件修饰符来限定事件行为 -->
        <a href="https://www.php.cn/" @click.prevent="this.url = $event.target.href;">显示网址: </a>
        <span class="url">{{url}}</span>

        <hr>
        <p onclick="alert('Hello')">
            <!-- .stop: 防止冒泡 -->
            <a href="https://www.php.cn/" @click.prevent.stop="this.url = $event.target.href;">显示网址: </a>
        <span class="url">{{url}}</span>
        </p>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    url: null
                }
            },
            methods: {
                showUrl(ev) {
                    // 禁用默认行为
                    ev.preventDefault();

                    // 防止冒泡
                    ev.stopPropagation();
                                                            // this: 当前vue实例
                    this.url = ev.target.href;
                }
            },
        }).mount('.app')
    </script>
</body>
</html>

demo7：列表渲染

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>