vue 初体验

作者: 未来在奋斗 | 来源:发表于2019-11-25 21:11 被阅读0次

vue知识回顾
Vue实现前后端分离项目的初体验
vue基础入门（1）
vue 基础指令以及过滤器
Vue 初体验
vue
★2019 前端进阶之路★Vue 组件间通信实战干货！
Vite + Vue3 初体验 —— Vue3 篇
Vue插件开发初体验——（懒加载）
Vue 初体验

<body>
    <div id="app">
        {{msg}}
        <!-- v-once在数据改变的时候不会改变 -->
        <p v-once>{{ msg }}</p>
        <!-- v-html是为了解析html标签的 -->
        <p v-html="str"></p>
        <!-- v-bind 绑定属性 -->
        <p :title="msg">你就是一个屁啊</p>
        <!-- 内置变量不需要去定义可以直接引用 -->
        <p> {{Date.now()}}</p>

        <!--在 v-model双向绑定的时候 能拿到input的值可以双向改变变量 -->
        <input type="checkbox" v-model="isChecked">同意协议
        <button :disabled="!isChecked">点击注册</button>
    
       <!-- .prevent="fn1"修饰符阻止默认事件 -->
        <form v-on:submit.prevent="fn1" action="http://www.baidu.com" method="POST">
            <button type="submit">提交</button>
          </form>
          <!-- v-bind:[attrname]="msg" 动态绑定属性,属性名属性值都是可以变化的 -->
          <p v-bind:[attrname]="msg">我是一个屁</p>
    </div>
    <script src="../vue.js"></script>
    <script>
    const app = new Vue({
        el:"#app",
        data:{
         msg:'草泥马',
         str:'<button>按钮</button>',
         isChecked: false ,
         attrname: 'id'  
        },
        methods:{
            fn1(){
                alert(1);
            }
        },
        computed:{
            //里面是方法
        reverseMsg(){

            // 计算属性
            return this.msg.split('').reverse().join('')
         }
        }

    });
    </script>