【Vue.js】Vue.js课堂笔记[课堂笔记-一]

课堂笔记 胡成 •
文章标签: Vue.js
7

前言：

如果代码要是看不清楚可以直接复制上页面看效果。


Vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js课堂实例笔记

<!-- 第一个Vue实例 -->

实例代码如下：

 <!-- 第一个Vue实例 -->
    <div id="app">
            <p>{{message}}</p>
    </div>

     <script>
            var app = new Vue({//new 关键字创建Vue的实例
              el: '#app',//这个实例的ID
              data: {//参数 data 定义Vue要用到的变量，也就是要处理的数据放到这里。在这里定义的数据是响应式，vue能够跟踪其变化
                message: '嗨~铁头!'//methods 用于定义的函数，可以通过 return 来返回函数值
              }
            })
    </script>


指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

实例代码如下：

<!-- v-bind指令 -->
    <!-- 在vue.js中 以v-开头的都是表示vue.js的指令
    v-bind都是单向绑定，将变量的内容渲染到页面，反之不行 -->
    <!-- 将数据message绑定最常见的形式就是使用 {{...}}（双大括号） -->
    <div id="app-1"><span v-bind:title="message">鼠标悬停几秒查看页面加载时间</span></div>
    <script>
        new Vue({
            el:'#app-1',
            data:{
                message:'时间：'+ new Date().toLocaleString()//实例个对象点出toLocaleString()获取日期时间
            }
        })
    </script>
     <!-- v-model 双向绑定数据 -->
     <!-- 双向绑定就是：数据的变化反馈到界面，界面的变化反馈到数据。实现数据的同步。 -->
     <div id="app-2">
        <!-- 数据变化后会及时反馈到界面 -->
         <p>{{message}}</p>
         <!-- 当input发生改变会及时反馈到数据 -->
         <input v-model="message">
     </div>
     <script>
          new Vue({
             el:'#app-2',
             data:{
                message:"呦~铁头"
             }
         })
     </script>
     <!-- v-if 有条件的渲染 -->
     <!-- v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入元素 -->
     <div id="app-3">
         <!-- v-if="show"输出结果：你现在看得见我了 -->
         <h1 v-if="show">你现在看得见我了</h1>
         <!--v-else 将会隐藏 -->
         <h1 v-else>你看不见我</h1>
         <button v-on:click="dis">点击</button>
     </div>
     <script>
         new Vue({
             el:'#app-3',
             data:{
                 show:true,
             },
             methods:{
                 dis(){
                     this.show=!this.show;
                 }
             }
         })
     </script>
     <!-- v-for 根据条件多次渲染 -->


     <!-- v-on 事件与方法 -->
     <!-- v-on指令 用来绑定事件 -->
     <!-- methods对象用来创建一系列的方法 -->
     <div id="app-4">
         <h1>{{message}}</h1>
         <button v-on:click="reverseMessage">逆转消息</button>
         <!-- v-for 根据条件多次渲染 -->
         <ul>
            <!-- v-for="todos in todos" 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法  -->
             <li v-for="todos in todos" style="list-style: none">
                 {{todos.text}}
             </li>
         </ul>
     </div>
     <script>
         new Vue({
             el:"#app-4",
             data:{
                message:"嗨咯,铁头！",
                todos:[
                    {text:'铁头'},
                    {text:'老顾'},
                    {text:'老李'},
                ]
             },
             methods:{
                reverseMessage:function(){
                    this.message=this.message.split("").reverse().join("");
                }
             },
            })
     </script>


Vue.js的实例过程

1.beforeCreate  初始化事件和生命周期。

2.created 对象创建完成，已经配置了data的观测、属性和方法的运算、watch、事件回调。这个阶段可以使用ajax调用接口的数据。

3.beforeMount 准备好需要渲染的节点，但还没有挂载。

4.mounted 将准备好的节点渲染到页面，这个阶段可以使用js操作dom了。

5.beforeUpdate 监测到数据有变化，准备需要更新的信息。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

6.updated  渲染更新后的数据。

7.beforeDestroy 调用vm.$distory()方法后执行。

8.destroed  Vue 实例销毁后调用，所有的事件监听器，子实例，观察器都会被销毁。

完整笔记代码如下：

<!-- 第一个Vue实例 -->
    <div id="app">
            <p>{{message}}</p>
    </div>

     <script>
            var app = new Vue({//new 关键字创建Vue的实例
              el: '#app',//这个实例的ID
              data: {//参数 data 定义Vue要用到的变量，也就是要处理的数据放到这里。在这里定义的数据是响应式，vue能够跟踪其变化
                message: '嗨~铁头!'//methods 用于定义的函数，可以通过 return 来返回函数值
              }
            })
    </script>
    <!-- v-bind指令 -->
    <!-- 在vue.js中 以v-开头的都是表示vue.js的指令
    v-bind都是单向绑定，将变量的内容渲染到页面，反之不行 -->
    <!-- 将数据message绑定最常见的形式就是使用 {{...}}（双大括号） -->
    <div id="app-1"><span v-bind:title="message">鼠标悬停几秒查看页面加载时间</span></div>
    <script>
        new Vue({
            el:'#app-1',
            data:{
                message:'时间：'+ new Date().toLocaleString()//实例个对象点出toLocaleString()获取日期时间
            }
        })
    </script>
     <!-- v-model 双向绑定数据 -->
     <!-- 双向绑定就是：数据的变化反馈到界面，界面的变化反馈到数据。实现数据的同步。 -->
     <div id="app-2">
        <!-- 数据变化后会及时反馈到界面 -->
         <p>{{message}}</p>
         <!-- 当input发生改变会及时反馈到数据 -->
         <input v-model="message">
     </div>
     <script>
          new Vue({
             el:'#app-2',
             data:{
                message:"呦~铁头"
             }
         })
     </script>
     <!-- v-if 有条件的渲染 -->
     <!-- v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入元素 -->
     <div id="app-3">
         <!-- v-if="show"输出结果：你现在看得见我了 -->
         <h1 v-if="show">你现在看得见我了</h1>
         <!--v-else 将会隐藏 -->
         <h1 v-else>你看不见我</h1>
         <button v-on:click="dis">点击</button>
     </div>
     <script>
         new Vue({
             el:'#app-3',
             data:{
                 show:true,
             },
             methods:{
                 dis(){
                     this.show=!this.show;
                 }
             }
         })
     </script>
     <!-- v-for 根据条件多次渲染 -->


     <!-- v-on 事件与方法 -->
     <!-- v-on指令 用来绑定事件 -->
     <!-- methods对象用来创建一系列的方法 -->
     <div id="app-4">
         <h1>{{message}}</h1>
         <button v-on:click="reverseMessage">逆转消息</button>
         <!-- v-for 根据条件多次渲染 -->
         <ul>
            <!-- v-for="todos in todos" 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法  -->
             <li v-for="todos in todos" style="list-style: none">
                 {{todos.text}}
             </li>
         </ul>
     </div>
     <script>
         new Vue({
             el:"#app-4",
             data:{
                message:"嗨咯,铁头！",
                todos:[
                    {text:'铁头'},
                    {text:'老顾'},
                    {text:'老李'},
                ]
             },
             methods:{
                reverseMessage:function(){
                    this.message=this.message.split("").reverse().join("");
                }
             },
        
            //  初始化事件和生命周期
             beforeCreate(){
                 console.log("创建前");
             },
            //  对象创建完成，已经配置了data的观测、属性和方法的运算、watch、事件回调。这个阶段可以使用ajax调用接口的数据。
             created (){
                 console.log("创建后");
             },
            //  准备好需要渲染的节点，但还没有挂载
             beforeMount  (){
                 console.log("渲染前");
             },
            //  将准备好的节点渲染到页面，这个阶段可以使用js操作dom了
             mounted   (){
                 console.log("渲染后");
             },
            //  监测到数据有变化，准备需要更新的信息。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
             beforeUpdate    (){
                 console.log("数据改变前");
             },
            //  渲染更新后的数据
             updated   (){
                 console.log("数据改变后");
             },
            //  调用vm.$distory()方法后执行
             beforeDestroy    (){
                 console.log("销毁前");
             },
            //  实例销毁后调用，所有的事件监听器，子实例，观察器都会被销毁。
             destroed  (){
                 console.log("销毁后");
             },
             
         })
     </script>


——来自胡小哥原创Vue.js课堂笔记（持续更新中...）

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :