zoukankan      html  css  js  c++  java
  • ch1-vuejs基础入门(hw v-bind v-if v-for v-on v-model 应用组件简介 小案例)

    1 hello world
    引入vue.min.js 代码: ----2.0+版本
    <div id="test">
              {{str}}
     </div>
           <script>
              var app = new Vue({
                 el: '#test',
                 data: {
                    str: 'hello world vuejs'
                 }
              });
           </script>

    2 v-bind 指令(v-)
    v-bind:title='str'
    绑定到title,title显示的时候就会触发

    3 条件与循环
    条件 v-if="表达式的结果" 结果为真显示否则隐藏
    循环 v-for 同for() 数据源为data的值

    4 事件监听 v-on 代码展示
        <div id="test5">
            <p>{{str}}</p>
            <button v-on:click="reverseStr">逆转显示</button>
        </div>
    
        var app5 = new Vue({
                el: '#test5',
                data: {
                    str: 'hello world Vue.js'
                },
                methods: {
                    reverseStr: function () {
                        this.str = this.str.split('').reverse().join('');
                    }
                }
            });


    5 v-model 使表单输入和应用状态间双向绑定 同ng-model
        <div id="test6">
            <p>{{str}}</p>
            <input type="text" v-model="str">
        </div>
        var app6 = new Vue({
                el: '#test6',
                data: {
                    str: '两只老虎跑得快'
                }
            });


    6 vue.js内置的指令
    v-if 条件渲染指令
    v-show 条件渲染指令 指令的元素始终会被渲染到html,这是简单的为元素设置style属性
    v-else
    可以为v-if或v-show添加一个'else块',必须跟在其后面
    v-else的元素是否显示取决于前面是v-if还是v-show v-if为true v-else不会渲染到dom v-show为true或false v-else都不会渲染到html
    v-for 遍历数组 xx in xx
    v-bind 语法:v-bind:argument='expression'
    argument表示html元素的特性如(attribute) 或 v-bind:class 可以高亮当前页 可缩写为:一个冒号
    v-on 语法与v-bind类似 监听dom事件
    调用方法:1 绑定一个方法名(让事件指向方法的引用)2 使用内联语句(执行方法) 可缩写为:@符号

    指令补充

    指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。

    指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。让我们回顾一下在介绍里的例子:

    <p v-if="seen">Now you see me</p>

    这里, v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。



    7 应用组件化 --用小型,自包含和可以复用的组件构建大型应用
            <div id="test">
                <my-component></my-component>
            </div>
            <script>
                Vue.component('my-component',{
                   template: '<h1>原来是个h1</h1>'
                });
                var app = new Vue({
                    el: '#test',
                })
            </script>
    
            <div id="test">
                <my-component v-for="item in groceryList" :todo="item"></my-component>
            </div>
            <script>
                Vue.component('my-component',{
                    //组件现在接收一个 'prop'类属于一个自定义属性属性名为todo
                    props: ['todo'],
                    template: '<h2>{{todo.text}}</h2>'
                });
                var app = new Vue({
                    el: '#test',
                    data: {
                        groceryList: [
                            { text: '蔬菜' },
                            { text: '奶酪' },
                            { text: '随便其他什么人吃的东西' }
                        ]
                    }
                })
            </script>


    8 小案例---由于 $index 问题 案例使用 ---vue.js 1.0.5
    <div id="app">
    
        <fieldset>
            <legend>
                添加新用户
            </legend>
            <div class="form-group">
                <label>姓名:</label>
                <input type="text" v-model="newPerson.name"/>
            </div>
            <div class="form-group">
                <label>年龄:</label>
                <input type="text" v-model="newPerson.age"/>
            </div>
            <div class="form-group">
                <label>性别:</label>
                <select v-model="newPerson.sex">
                    <option value="男" selected = "selected">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label></label>
                <button @click="createPerson">添加</button>
            </div>
        </fieldset>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="person in people">
                <td>{{ person.name }}</td>
                <td>{{ person.age }}</td>
                <td>{{ person.sex }}</td>
                <td :class="'text-center'"><button @click="deletePerson($index)">删除</button></td>
            </tr>
            </tbody>
        </table>
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                newPerson: {
                    name: '',
                    age: 0,
                    sex: '男'
                },
                people: [{
                    name: '张三',
                    age: 30,
                    sex: '男'
                }, {
                    name: '李四',
                    age: 26,
                    sex: '男'
                }, {
                    name: '王五',
                    age: 22,
                    sex: '女'
                }, {
                    name: '赵六',
                    age: 36,
                    sex: '男'
                }]
            },
            methods: {
                createPerson: function () {
                    this.people.push(this.newPerson);
                    //添加完newPerson对象后,重置newPerson对象
                    this.newPerson = {name:'',age:'',sex:'男'}
                },
                deletePerson: function (index) {  //实参$index在2.0+版本无此功能
                    this.people.splice(index,1);
                }
            }
        })
    </script>

      
    
    
  • 相关阅读:
    vue form dynamic validator All In one
    TypeScript api response interface All In One
    closable VS closeable All In One
    macOS 如何开启 WiFi 热点 All In One
    vue css inline style All In One
    vs2010里面 新建网站里面的 asp.net网站 和 新建项目里面的 asp.net Web应用程序 的区别 (下)
    牛腩新闻 59 整合添加新闻页 FreeTextBox 富文本编辑器,检测到有潜在危险的 Request.Form 值,DropDownList 的使用
    牛腩新闻 61尾声: error.aspx的使用 防止报错
    vs2010里面 新建网站里面的 asp.net网站 和 新建项目里面的 asp.net Web应用程序 的区别 (上)
    牛腩新闻 62:尾声续2 asp.net的编译和发布
  • 原文地址:https://www.cnblogs.com/easyweb/p/6641622.html
Copyright © 2011-2022 走看看