Vue介绍

 

vue官网介绍里面的练习

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
                {{message}}
        </div>
        
        <div id="app-2" v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </div>
        
        <!-- 条件 -->
        <div id="app-3">
            <div v-if="seen">现在你看到我了</div>
            <div>123</div>
        </div>
        
        <!-- 循环 -->
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        
        
        <div id="app-5">
            <p>{{message}}</p>
            <button v-on:click="reverseMessage">反转消息</button>
        </div>
        
        <!-- 处理用户输入 -->
        <div id="app-6">
            <p>{{message}}</p>
            <input type="text" v-model="message"/>
        </div>
        
        
        <!-- 模板 每个待办项渲染同样的文本-->
        <div id="app-7">
            <todo-item></todo-item>
            <todo-item></todo-item>
            <todo-item></todo-item>
        </div>
        
        
        <!-- 父作用域将数据传到子组件 -->
        <div id="app-8">
            <todo-item1
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
            ></todo-item1>
        </div>
        
    </body>
    
    <script type="text/javascript">
    
    
        var app =new Vue({
            el:"#app",
            data:{
                message:'Hello Vue'
            }
        })
        
        var app2 = new Vue({
            el:'#app-2',
            data:{
                message:'页面加载于'+ new Date().toLocaleString()
            }
        })
        
        var app3 = new Vue({
                    el:'#app-3',
                    data:{
                        seen:false
                    }
                })
                
                
        
        var app4 = new Vue({
            el:"#app-4",
            data:{
                todos:[
                    {text:'学习JavaScript'},
                    {text:'学习Vue'},
                    {text:'嘘唏'}
                ]
            }
        })
        
        
        var app5=new Vue({
            el:"#app-5",
            data:{
                message:"Hello Vue.js"
            },
            methods:{
                reverseMessage:function(){
                    this.message=this.message.split('').reverse().join('')
                }
            }
        })
        
        
        var app6 = new Vue({
            el:"#app-6",
            data:{
                message:"hello vue"
            }
        })
        
        
        
        Vue.component('todo-item',{
            template:'<li>这是个代办项</li>'
        })
        
        var app7 = new Vue({
            el:'#app-7'
        })
        
        
        
        Vue.component('todo-item1',{
            props:['todo'],
            template:'<li>{{todo.text}}</li>'
        })
        var app8 = new Vue({
            el:"#app-8",
            data:{
                groceryList:[
                    {id:0,text:'蔬菜'},
                    {id:1,text:'奶酪'},
                    {id:2,text:'随便什么'}
                ]
            }
        })
        
        
    </script>
</html>

 

 

 

 

 

 

Vue 允许您使用生命周期方法在此生命周期的各个阶段运行方法。这对于诸如数据获取之类的事情很有用，您可能需要在组件呈现之前或属性更改之后获取数据。生命周期方法列表如下，按照它们触发的顺序。

  1. beforeCreate()— 在创建组件实例之前运行。数据和事件尚不可用。
  2. created()— 在您的组件初始化之后但在组件添加到 VDOM 之前运行。这通常是发生数据提取的地方。
  3. beforeMount()— 在你的模板编译之后，但在你的组件被渲染到实际的 DOM 之前运行。
  4. mounted()— 在您的组件安装到 DOM 后运行。可以访问refs这里。
  5. beforeUpdate()— 只要组件中的数据发生更改，但在将更改呈现到 DOM 之前运行。
  6. updated()— 每当您的组件中的数据发生更改以及将更改呈现到 DOM 后运行。
  7. beforeDestroy()— 在从 DOM 中删除组件之前运行。
  8. destroyed()— 在从 DOM 中删除组件后运行。
  9. activated()— 仅用于包装在特殊keep-alive标签中的组件。在组件激活后运行。
  10. deactivated()— 仅用于包装在特殊keep-alive标签中的组件。在组件停用后运行。

 

posted @ 2021-12-17 14:35  漫漫长路</>  阅读(81)  评论(0)    收藏  举报