• Vue官网教程-介绍


    <div id="app">
            {{message}}
        </div>
    
        <script>
            var app = new Vue({
        
                el:'#app',
                data:{
                    message:'hello world'
                }
    
            });
        </script>

    去接管id为app的区域

    data里面定义了message,DOM里面可以通过{{}}使用

    插值表达式渲染成了 Hello world了

     去改变message的值,DOM上的值也会改变

    将标签的属性和vue实例的数据绑定起来,不能使用插值表达式了

    要使用指令

    该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”

    注意vue的数据使用都是 "保持一致",是双向绑定

    <div id="app">
            <!-- {{message}} -->
            <span v-bind:title = "message">
                    鼠标悬停几秒钟查看此处动态绑定的提示信息1!
            </span>
            <br>
            <span title = {{message}}>
                    鼠标悬停几秒钟查看此处动态绑定的提示信息2!
            </span>
        </div>

    渲染之后,只有第一个是正确登

    v-if用来切换这个元素是否显示

    <div id="app">
            <p v-if="seen">现在你看到我了</p>
        </div>
    
    
    <script>
            var app = new Vue({
                el:'#app',
                data:{
                    message: 'hello world',
                    seen: true
                }
            });
        </script>

    渲染之后,没有v-if,只有原来写那的P标签

    将seen改成false

    整个p标签都没有了

    使用v-for来绑定数组,进行渲染

    注意这个绑定,vue所有的数据都是绑定的,而不是使用,双向绑定!

     <div id="app">
            <ol>
                <!-- li要显示多少个,是未知的 -->
                <li v-for="todo in todos">{{todo.text}}</li>
            </ol>
        </div>
    
    
        
    
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    // todos是一个数组
                    todos:[
                        // 这里是一些对象
                        {text:'学习 JavaScript'},
                        {text:'学习 Vue'},
                        {text: '整个牛项目'}
                    ]
                }
            });
        </script>

    可以看到,渲染出来是没有v-for指令的

    因为是双向绑定,数组发生变化,页面也会渲染

    使用push添加元素

     处理用户输入

    v-on来绑定事件

    <div id="app">
            <p>{{message}}</p>
            <!-- 指令里面使用vue实例的数据,直接写名字即可 -->
            <button v-on:click="reverseMessage">逆转消息</button>
        </div>
    
    
        
    
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                   message:'Hello Vue.js!'
                },
                methods:{
                    // reverseMessage是一个匿名函数
                    reverseMessage:function (){
                        // 可以直接通过this来使用数据,不用app.$data.message
    
                        // 先一个个字符分割(变成数组),再逆转,再拼接起来(字符串)
                        this.message = this.message.split('').reverse().join('');
                    }
                }
            });
        </script>

    HTML里面没看到显式的绑定

    点击

     

    注意看,是表单的时候使用v-model

     <div id="app">
    
            <!-- 显示message的值 -->
            <p>{{message}}</p>
    
            <!-- 将输入框的内容与message双向绑定了 -->
            <input v-model="message">
            
        </div>
    
    
        
    
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                   message:'Hello Vue.js!'
                }
            });
        </script>

    input标签里面其实什么都没有

    感觉可以防爬虫哦!

    修改输入框内容的同时,p标签也跟着变化了

    因为输入框内容使用v-model和message双向绑定,p是显示message的值,message改变的同时,重新渲染P

    组件概念

    <div id="app">
    
            <ol>
                <!-- 使用标签 -->
                <todo-item></todo-item>
            </ol>
            
        </div>
    
    
        
    
        <script>
    
            // 名字和模板内容
            Vue.component('todo-item',{
                template:'<li>这是一个代办事项</li>'
            })
    
            
        </script>

    标签可以看作一个占位符,渲染之后就用template里面的东西去代替了。

    这个和angular一样,但是angular里面一个组件要用ng component去创建,一个组件包含三个文件,还要去引用。很麻烦

     <div id="app">
    
            <ol>
                <!-- 使用标签 -->
                <!-- 特性的绑定用v-bind,类似v-bind:title,通过一个自定义特性去获取数据 -->
                <!-- 每个组件都要绑定一个key -->
                <todo-item 
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id">
                </todo-item>
            </ol>
            
        </div>
    
    
        
    
        <script>
    
            // 名字和模板内容
            Vue.component('todo-item',{
                // 给这个组件添加一个特性todo,特性就是类似tiele那些东西
                props:['todo'],
                template:'<li>{{todo.text}}</li>'
            })
    
            var app = new Vue({
                el:'#app',
                data:{
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '随便其它什么人吃的东西' }
                        ]
                }
            });
        </script>

  • 相关阅读:
    PHP中使用cURL实现Get和Post请求的方法
    详解回调函数——以JS为例解读异步、回调和EventLoop
    JavaScript中变量提升------Hoisting
    js 变量提升(JavaScript Scoping and Hoisting)
    js 如何判断数据是数据还是对象
    Bootstrap Modal 垂直方向加滚动条
    Bootstrap Affix(附加导航(Affix)插件的用法)
    Vue 源码解析:深入响应式原理(上)
    ceph API之PHP的S3-SDK包的泛域名解析问题
    ceph API之PHP的客户端连接
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9520031.html
Copyright © 2020-2023  润新知