vue基础使用--{{填写指定键}}

vue2--学法用脚手架自动生成

<template>
  <div>
    <!-- 
        1.可以拼字符串
        2.可以调用api
        3.可以写三元表达式
        4.插值表达式中不能写语句，如if...
       -->
    <h3>我的姓名为：{{ username }}</h3>
    <h3>我的年龄为：{{ age }}</h3>
    <h3>我的女友为：{{ girlfriend }}</h3>
  </div>
</template>

<script>
export default {
  // 在数组中定义数据--属性，都在data()中
  data() {
    return {
      // 数据在这里定义
      username: "狐妖",
      age: "18",
      girlfriend: "纲手",
    };
  },
};
</script>

<style>
</style>

引入式学法

<div id="add">
        <p> {{username}} </p>
    </div>
    <!-- 引入js文件，引入之后就会在全局挂载一个Vue构造函数 -->
    <script src="./js/vue.js"></script>
    <script>
        // 固定学法（vm-自定义）
        const vm = new Vue({
            el: '#add', //指向选择器-View视图区域
            // data指向对象-Model数据源
            data: { 
                username: 'huangchao',
            }
        })
    </script>

安装调试工具--方便开发

谷歌安装-- vue-devtools 调试工具

--常用指令--

1, v-text --元素内部的内容会被覆盖

<p v-text="username"></p>

2, {{}} --插值表达式：开发中使用最对，只是内容占位符-不会覆盖内容

注意：不能使用在元素属性节点中

<p> {{username}} </p>

3，v-html --作用：可以解析带标签的字符串-渲染到页面--跟 `` 是一样的效果--很少用

<p v-html="username"></p>
 const vm = new Vue({
            el: '#add',
            data: {
                username: '<h6 style="color:#008c8c">Hello World</h6>',
            }
        }) //结果 Hello World

3，v-bind: 为元素的属性动态绑定值 --简写--英文：

插值中可以进行简单的运算-三元--(还能调方法)

<input type="text" v-bind:placeholder="text">
<input type="text" :placeholder="text"> 
    <!-- data: { text: '请输入内容' } -->

4，v-on--事件绑定--简写--@事件类型="函数名"

<div id="add">
        <!-- 常规写法 -->
        <button v-on:click="del">这是一个按钮</button>
        <!-- 简写---推荐推荐 -->
        <button v-on:click="del">这是一个按钮</button>
        <!-- methods:{del(可以传参，自带有e) {内容}} -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#add',
            data: {},
            methods: {
                //普通学法
                app: function () {
                    console.log('ddddd');
                },
                // 简写---推荐推荐
                del() {
                    console.log('事件绑定成功');
                },

            }
        })
    </script>

键盘事件绑定：

<input type="text" @keyup.esc="clear" @keyup.enter="">

5，事件修饰符-- .prevent -- .stop

.prevent：阻止默认行为

.stop：阻止事件冒泡

.once：绑定的事件只触发一次

 <div id="del">
        <a href="https://www.baidu.com" @click.prevent="add">跳转百度首页</a>
        <div style="height: 200;background-color: orange;line-height: 200px;" @click="btn">
            <button @click.stop="add">这是一个按钮</button>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#del',
            methods: {
                add() {
                    console.log('你点击了链接');
                },
                btn() {
                    console.log('这是盒子里的按钮')
                }
            }
        })
    </script>

6，v-model：双向数据绑定--不操作DOM的前提下，拿到用户输入的数据

主要结合表单来使用

 <div id="app">
        <p>用户的名字是：{{ username }} </p>
        <input type="text" v-model="username">
        <hr>
        <input type="text" :value="username">
        <hr>
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">四川</option>
            <option value="2">广州</option>
            <option value="3">上海</option>
            <option value="4">西藏</option>
            <option value="5">北京</option>
        </select>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'huangchao',
                city: ''
            }
        })
    </script>

v-model：修饰符

-- .number：自动转换数字类型-- .trim：过滤首尾空格 -- .lazy：在'change'时更新而非'input'

<input type="" v-model.number="city"> + <input type="" v-model.number="num"> = <span> {{city + num }} </span>

        <br>
        <input type="text" v-model.trim="username">

7.条件渲染

v-if：每次动态创建或移除元素，实现元素隐藏或显示 --默认情况不展示使用

<!-- 条件判断：很少用全--一般v-if v-else就可以了 -->
<div v-if></div>
<div v-else-if></div>
<div v-else-if></div>
<div v-else></div>

v-show：动态为元素添加移除 disolay：none 样式，实现元素隐藏或显示 --频繁切换使用

v-for：循环渲染指令

  <div id="add">

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </thead>

            <tr v-for="(item,i) in list" :key="item.id" :title="item.name + i">
                <td> {{i}} </td>
                <td> {{item.name}} </td>
                <td> {{item.age}} </td>
            </tr>
        </table>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#add',
            data: {
                list: [
                    { id: 1, name: '老五', age: 18 },
                    { id: 2, name: '自来也', age: 24 },
                    { id: 3, name: '纲手', age: 23 },
                ]
            },
        })
    </script>

总结：后续会不断跟新vue

后面跟新的将是最新的vue资料，我还是尽量总结干货--初来乍到多多关照

代码可以直接自己跑一下，文件引用懂得都懂

Vue-入门常用指令