Vue.js学习

来源：互联网发布：linux centos官网编辑：程序博客网时间：2024/06/05 17:33

一.初步使用

1.引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>

2.数据双向绑定

<script>    var app= new Vue({    el:'#app',    data:{        message:"Hello Vue"    }})</script>

<div id="app">    {{ message }}</div>

3.属性绑定 v-bind -----(v-bind 指令用于响应地更新 HTML 特性：例如v-bind:title="message"则是响应更新title属性)

指令带有前缀 v-的是Vue.js提供的特殊属性

`v-bind` 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<span v-bind:title='message'>        Hover your mouse over me for a few seconds to see my dynamically bound title!        (鼠标悬停几秒钟看俺动态绑定标题)</span>

4.v-if 控制显示与隐藏

当v-if=true时候显示 false则隐藏

<h1 v-if="seen">朱小蕙,我不在的这些日子你还好吗</h1>

5.v-for 指令可以绑定数据遍历生成类似于 angular里面的ng-repeat

<li  v-for="key in products" >     {{key}}  //注这里的key只是代表data里面products数组里面的一个item   OK?</li>

6.当然啦也少不了监听用户的事件啦 v-on

`v-on` 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a

methods:{    reverseMessage:function(){        this.message = this.message.split('').reverse().join('')    }}

<button v-on:click="reverseMessage    //注这里面是函数名字">
    点击事件</button>

7. v-model 指令 (表单双向数据绑定)

<input placeholder="" v-model="message">

我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。

二.用组件构建我们的应用

1.通过组件渲染

    <script>        window.onload=function(){            //定义一个名为todo项的新组件            Vue.component('todo-item', {                props: ['todo'],                template: '<li>{{ todo.text }}</li>'            })            var app7 = new Vue({                el: '#app-7',                data: {                    groceryList: [                        { text: 'Vegetables' },                        { text: 'Cheese' },                        { text: 'Whatever else humans are supposed to eat' }                    ]                }            })        }    </script></head><body><div id="app-7">    <ol>        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>    </ol></div>

三.Class 与 Style 绑定

v-bind:class

<div v-bind:class="classObject">多希望你就是最后的人</div>

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

<div v-bind:style="styleObject"></div>

data: {    styleObject: {        color: 'red',        fontSize: '13px'    }}

四.vue里面获取属性

五,初步总结

Vue主要有以下几个

v-model 绑定模型
v-if 判断是否显示该dom
v-show 判断是否将该dom的display设为none
v-else if或者show为false时显示该dom
v-for 迭代
v-bind 绑定属性
v-on 绑定方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="styles/demo.css" />    <script src="js/vue.js"></script>    <script>        // 初始化Vue        //el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom        //data中为模型        //methods为方法        window.onload=function(){            var vm = new Vue({                el: '#app',                data: {                    search:{                        key:""                    },                    newPerson: {                        name: '',                        age: 0,                        sex: 'Male'                    },                    people: [{                        name: 'Jack',                        age: 30,                        sex: 'Male'                    }, {                        name: 'Bill',                        age: 26,                        sex: 'Male'                    }, {                        name: 'Tracy',                        age: 22,                        sex: 'Female'                    }, {                        name: 'Chris',                        age: 36,                        sex: 'Male'                    }]                },                methods:{                    createPerson: function(){                        this.people.push(this.newPerson);                        // 添加完newPerson对象后，重置newPerson对象                        this.newPerson = {name: '', age: 0, sex: 'Male'}                    },                    deletePerson: function(index){                        // 删一个数组元素                        this.people.splice(index,1);                    }                }            })        }    </script></head><body><div id="app">    <span>Query</span>    <!-- 绑定model中search.key -->    <!-- 内容和下面每一列的数据进行比较 -->    <!-- 内容改变，下面的每一列都马上会进行比较 -->    <input type="text" v-model="search.key">    <legend>        Create New Person    </legend>    <div class="form-group">        <label>Name:</label>        <!-- 绑定model中newPerson.name -->        <input type="text" v-model="newPerson.name"/>    </div>    <div class="form-group">        <label>Age:</label>        <!-- 绑定model中newPerson.age -->        <input type="text" v-model="newPerson.age"/>    </div>    <div class="form-group">        <label>Sex:</label>        <!-- 绑定model中newPerson.sex -->        <select v-model="newPerson.sex">            <option value="Male">Male</option>            <option value="Female">Female</option>        </select>    </div>    <div class="form-group">        <label></label>        <!-- @click是v-on:click的缩写 -->        <button @click="createPerson">Create</button>    </div>    </fieldset>    <table>        <thead>        <tr>            <th>Name</th>            <th>Age</th>            <th>Sex</th>            <th>Delete</th>        </tr>        </thead>        <tbody>        <!-- 用v-for迭代，$index为每一个item的索引 -->        <!-- v-if判断为true则显示，否则则移除，这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->        <!-- 和搜索框内容进行比较 -->        <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">            <td >{{ person.name }}</td>            <!-- :style是v-bind:style的缩写，满足条件则值为前面的，否则为后面的，固定的字符串要用' ',变量不需要用'' -->            <!-- v-bind后面还可以接其他的属性例如class，id -->            <td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>            <!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->            <td v-if="person.sex =='Male'">男</td>            <td v-else>女</td>            <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>        </tr>        </tbody>    </table></div></body></html>

0 0

Vue.js学习

v-bind 缩写

v-on 缩写

Vue主要有以下几个

`v-bind` 缩写

`v-on` 缩写