Vue.js入门与核心指令-优快云博客

本文链接：https://blog.youkuaiyun.com/Lzp_csdn1/article/details/104641933

vue.js - 入门程序

编写html，引入vue.min.js(vue.js的类库)
编写试图部分的代码(用户界面，只负责展示)
编写VM(viewModel)及其中的Model
刷新页面运行程序，vue.js(VM)部分实现将model中的数据在view中展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <!--实现在包区域显示一个名称-->
    <div id="app">
        {{name}}<!--相当于MVVM的view试图-->
    </div>
</body>
<script>
    // 编写MVVM的model部分及vm部分
    var VM = new Vue({
        el:'#app', //vm接管app区域的管理
        data:{ //model数据
            name:'李志鹏'
        },
    });
</script>
</html>

vue常用指令

1.v-model：
	可以实现双向数据绑定：
		a.由模型数据绑定到Dom对象，模型数据的值改变，Dom对象的值自动改变
		b.由Dom对象绑定到模型数据，Dom对象的值改变，模型数据就改变
	v-model只能在如下元素中使用：
		input	select	textarea	components(Vue中的组件)
2.v-text:
	v-text可以将一个变量的值渲染到指定的元素中，它可以解决插值表达式闪烁的问题
3.v-on:
	监听用户事件
4.v-bind:
	v-bind可以加个数据对象绑定在dom的任意属性中
	v-bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class

案例：
<body>
    <div id="app">
        <a v-bind:href="url">
        <!-- {{name}} -->
            <span v-text="name"></span>
        </a>
        <input type="text" v-model="num1" /> + 
        <input type="text" v-model="num2" /> =
        <!-- {{Number.parseInt(num1) + Number.parseInt(num2)}} -->
        <span v-text="result"></span>
        <button v-on:click="change">计算</button>
        <div v-bind:style="{ fontSize: size + 'px' }">Vue学习</div>
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    var VM = new Vue({
        el:'#app',
        data:{
           name:'李志鹏', 
           num1:0,
           num2:0,
           result:0,
           url:'http://www.baidu.com',
           size:11,
        },
        methods:{
            change:function(){
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2)
                // alert("计算结果：" + this.result)
            }
        }
    });
</script>

v-if和v-for：

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{{index}}--{{item}}</li>
            <li v-for="(value,key) in user">{{key}}--{{value}}</li>
            <li v-for="(item,index) in userList" :key="item.user.username">
                <div v-if="item.user.username == 'lizhipeng'" style="background: #00f50f">
                    {{index}}--{{item.user.username}}--{{item.user.age}}
                </div>
                <div v-else="">
                    {{index}}--{{item.user.username}}--{{item.user.age}}
                </div>
            </li>
        </ul>
    </div>
</body>
<script>
    var VM = new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5],
            user:{username:'lizhipeng', age:23},
            userList:[
                {user:{username:'lizhipeng', age:23}},
                {user:{username:'huangyuane', age:22}}
            ]
        },
    });
</script>