Vue 的学习使用笔记1

最新推荐文章于 2024-09-10 00:01:52 发布

guotianxiu1234

最新推荐文章于 2024-09-10 00:01:52 发布

阅读量181

点赞数

分类专栏：基础前端

本文链接：https://blog.csdn.net/guotianxiu1234/article/details/100520321

版权

基础前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue 基础：
angular 09 年
react 2013
vue 2014年作者：尤雨溪

前端框架和库的区别：
库：小而精，能实现某些功能，引用库直接调用某些函数，通过函数操作Dom
框架：大而全，里面包含很多库，使用框架需要初始化自身的一些行为，执行所编写的一些代码，存放一些资源

Vue：
如果Template中定义了内容，那么优先加载template里的内容，如果没有定义内容那么加载 el:"#app" 中的内容
数据发生改变时，视图发生改变，简而言之数据驱动视图（视图为页面所示内容，数据动态可变，后期可以修改）
指令中如果不经常使用建议使用v-if eg：登录注册页面，如果经常使用，建议用v-show ，eg 选项卡
v-bind: 用于绑定属性 eg v-bind:class=""
v-model 只能用于有value属性的标签，eg ：ipnut
Vue 组件中的指令：
v-text
v-html
v-bind
v-if
v-show
v-for
v-on
v-model

template :
template 标签用反括号引（就是键盘的左上方, 1的左边不需要组合键, 直接按下即可）
局部组件：
生子挂子用子
声明子元素，挂载到父元素上，然后用子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../vue.js"></script>
    <style>
        .box{ width: 200px;
              height: 200px;
              background-color:rebeccapurple
        }
        .active{
            background: firebrick
        }
    </style>
</head>
<body>
    <div id="app">
            <!-- {{msg}} -->
            
            
    </div>
    <script>
       var App={
            data(){
                return{}
            },
            template:`<div>我是入口组件<div>`
        };
         var vm =new Vue({
            el:"#app",
            data: function(){
                return {
                    msg:"alicedd",
                    isred:true
                    
                }
            },
            methods: {
                change(e){
                    console.log("=======")
                    this.isred=!this.isred;
                }
            },
            components:{
               Header:App  // header 是随便起的标签名，App 是上面声明的 ，下面使用时是用标签名的 
            },
            template:`<Header></Header>`
            // `<div ><h1>{{msg}}</h1> <div class='box'
            //  v-bind:class='{active:!isred}' 
            // v-on:click='change'> </div> 
            // <input type='text'v-model='msg'><div>`

           
          
        
           
        
         
    })
    console.log(vm)
    
    </script>
</body>
</html>