关于VUE的系统学习

VUE–系统学习

整体模型

1、视图部分V

​

表达式{{example}} 主要展示一些数据

​

2、视图模型部分VM

​

 var VM=new vue({
 el:"#app";
 })

​

3、模型部分M

  //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            list:[1,2,3,4,5],
            user:{uname:'itcast',age:10},
            userlist:[
                {user:{uname:'itcast',age:10}},
                {user:{uname:'itheima',age:11}}
            ]
        },
        methods:{
			exam:function(){//express language}
		 }
    });

​

vue的特性（细节使用）

​

双向数据绑定 v-model=“标识符”

 <script src="../webpacktest02/src/vue.min.js"></script>
<div id="app">
    黑马程序员<input type="text" v-model="num1" />+
    <input type="text"  v-model="num2"/>={{result}}
    //v-model=标识符
    <button v-on:click="add">计算</button>//时间触发

    <a v-bind:href="baidu" v-bind:style="{fontSize:size+'px'}" >有问题找百度</a>
    <input v-bind:value="num2"/>
    {{name}}<!--相当于MVVM的view视图-->
</div>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            name:'传智播客',
            num1:0,
            num2:0,
            result:0,
            baidu:"https://www.baidu.com",
            size:19
        },
        methods:{
            add:function () {
                this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);
                alert(this.result);
                var message1;
                message1=prompt("请输入你想输入得信息");
                confirm(message1);
            }
        }
    });
</script>

v-model=“date里边定义的变量” 在标签里边使用 只能用在 input textarea select 等标签里边，所以具有局限性。

插值表达式 {{Number.parseInt(num1)}}

比如{{Number.parseInt(num1)}}有一个影响用户体验的缺点 就是先加载差值表达式文本内容，在解析计算，可以用 v-text 替换 但是必须得使用标签 比如 （属性不会直接显示）

所以文本内容建议不要使用差值表达式显示，应该使用v-text属性 解析后显示

事件触发 v-on:事件类型=“add”（见上方代码）@:事件类型

事件触发方法

methods:{

add:function(){

//使用date 里边 变量的时候需要加上 this.arg

this.result=this.num1+num2; //例子

}

​

}

属性绑定 v-bind:标签属性 （相当于一个功能加强的v-model ,不仅可以在v-model进行数据绑定 的标签里使用，还可以在任意标签里边使用）:属性名=“变量名”

example：< a v-bind:href=“url” v-bind:style="fontSize: size +‘px’ ">dou you hava question

notice: url & size 都是在 vue M date 里边定义的参数

判断 循环 V-if=“index % 2 ==0” v-for="(item ,index) in list"

<div id="app">
    <!--相当于MVVM的view视图-->
    <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.uname">
            <div v-if="item.user.uname == 'itheima'" style="background: #00f50c">
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>
            <div v-else="">
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>

        </li>
    </ul>
</div>
</body>
<script src="../webpacktest02/src/vue.min.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分
    var VM = new Vue({
        el:'#app',//vm接管了app区域的管理
        data:{//model数据
            list:[1,2,3,4,5],
            user:{uname:'itcast',age:10},
            userlist:[
                {user:{uname:'itcast',age:10}},
                {user:{uname:'itheima',age:11}}
            ]
        }
    });
</script>