码迷,mamicode.com
首页 > 其他好文 > 详细

vue框架

时间:2020-06-16 20:46:59      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:let   会同   dir   导入   多个   范围   识别   obj   ase   

vue前端框架(MVVM 模型:Model-View-ViewModel)

jquery 是 获取元素,完成特效;

vue 是 方便操作 ,控制数据 ,也可完成特效

vue.js

script src 导入

V,view 视图模板

div:

{{ message }}

script: vue.js要控制器的内容范围,必须先通过id来设置。

vue核心对象vm实例化:

var vm = new Vue({     // VM 时刻保证视图模板中的数据和data 数据一致 双向绑定 连接 V 和 M

	el:‘#d1‘,    // vue 操作的元素 选择符

	data:{       //保存数据  M,model 模型

		message:‘hello world‘,

		}

})

注意:

一个网页多个vue对象,名称 vm1 , vm2,一个vue对象负责一个特殊功能,js代码区分大小写

标签 一定 要在vue代码的前面,否则,识别不到 或者 window.onload = function(){...}

console.log(vm.$el)

console.log(vm.$.data)

console.log(vm.$data.message)

console.log(vm.message) message 是 data 里的数据,可以直接 点 .

1 显示数据:注意:要在el指定的标签里

普通显示纯文本数据,{{ }} {{ num + 1}} {{ message.toUpperCase }} js内置的方法可以使用 三元表达式:{{ num2>num1?num2:num1 }}

显示标签文本,v-html = ‘img‘ , data:‘img‘ 的包含标签的文本就可以显示了,

表单框中显示的数据: v-model = ‘name‘,标签属性;data 数据: ’name‘:‘aaa‘,修改文本内容, data 里的数据也发生了改变,即网页其它引用这个数据 的地方 全部都改了。

2 常用指令:

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

指令会在vm对象的data属性的数据发生变化时,会同时改变元素中的其控制的内容或属性。

vue1.x写法 vue2.x的写法

vue1.x写法             vue2.x的写法
v-html         ---->   v-html
{{ 普通文本 }}          {{普通文本}}
v-bind:属性名   ---->   :属性    为了让 vue 识别这个属性
v-on:事件名     ---->   @事件名
2.1 操作属性:

格式:

<标签名 :标签属性="data属性"></标签名>

<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容,{{  }} 是简写
2.2 事件:
data:{
            str1: "hello",
            num: 20,
            price: 7.1,
            url1: "http://www.baidu.com",
            url2: "http://www.taobao.com"
          }

methods:{
	change(){    				// change:function(){}
		this.type = ‘text‘
}
}

事件:@事件名:@click 1.x: v-on:事件名

@click = "change" 需要methods @click="goods.num++" 直接的方法,函数

绑定的事件的事件名,全部都是js的事件名:
@submit ---> onsubmit
@focus ---> onfocus
@blur ---> onblur
@click ---> onclick

data:{

	goods:{
		num:0
	}
}

methods:{
	if(this.goods.num--<1){}   这里是执行了 -- 的 然后进行比较
                             
    if(this.num<=1){     // 当目前的数字是0,那么显示就是0了,如果不是0,就减去1
        this.num=0;
     else{
         this.num--;
                    }
}
2.3 操作样式: :style 不建议用

例子:隔行变换颜色

<tr :bgcolor="index%2==0?‘#ffaaaa‘:‘#aaaaff‘"  v-for="obj,index in goods_list">
                <td>{{obj.name}}</td>
                <td>{{obj.num}}</td>
                <td>{{obj.price}}</td>
                <td>{{index}}</td>
            </tr>

总结:在标签里,要想通过 vue 操作标签的属性,就要把属性前 加 : ,这样才能识别属性。

在标签里,属性值要用 引号 括起来,其中的 变量 运算 等都不需要 {{}} , 引号等包裹,直接写就好了。在这个例子中,颜色值当然要引号,,,

类:data里的属性值 没引号;style:data里的属性值有引号;

1 操作类:
:class = 值 或 对象

格式:
   <h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数组

:class = "{cla1:true}"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
    .box1{
        color: red;
        border: 1px solid #000;
    }
    .box2{
        background-color: orange;
        font-size: 32px;
    }
    </style>
</head>
<body>
    <div id="box">
        <!--- 添加class类名,值是一个对象
        {
         class类1:布尔值变量1,
         class类2:布尔值变量2,
        }
         -->
        <p :class="{box1:myclass1}">一个段落</p>
        <p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一个段落</p>
    </div>
    <script>
        let vm1=new Vue({
            el:"#box",
            data:{
                myclass1:false, // 布尔值变量如果是false,则不会添加对象的属性名作为样式
                myclass2:true,  // 布尔值变量如果是true,则不会添加对象的属性名作为样式
            },
        })
    </script>

    <!-- 上面的代码可以:class的值保存到data里面的一个变量,然后使用该变量作为:class的值 -->
    <style>          常用
    .box4{
        background-color: red;
    }
    .box5{
        color: green;
    }
    </style>
    <div id="app">
        <button @click="mycls.box4=!mycls.box4">改变背景</button>
        <button @click="mycls.box5=!mycls.box5">改变字体颜色</button>
        <p :class="mycls">第二个段落</p>
    </div>
    <script>
        let vm2 = new Vue({
            el:"#app",
            data:{
                mycls:{
                    box4:false,
                    box5:true
                },
            }
        })
    </script>

    <!-- 批量给元素增加多个class样式类 -->
    <style>
    .box6{
        background-color: red;
    }
    .box7{
        color: green;
    }
    .box8{
        border: 1px solid yellow;
    }
    </style>
    <div id="app2">
            <p :class="[mycls1,mycls2]">第三个段落</p>
    </div>
    <script>
        let vm3 = new Vue({
            el:"#app2",
            data:{
                mycls1:{
                    box6:true,
                    box7:true,
                },
                mycls2:{
                    box8:true,
                }
            }
        })
    </script>
</body>
</html>

:值: fc变量,‘red‘,

属性的写法: 有横线的加引号,或者backgroundColor

或 数组 [cla1,cla2,cla3] 添加多个样式

或 三元表达式 "bool?‘box1‘:‘‘ " 满足条件 样式 1 否则 样式 2 比如 disabled

2 操作 style

传值:值是json对象
<div :style="{color: activeColor, fontSize: fontSize + ‘px‘ }"></div>

data: {
             activeColor: ‘red‘,
             fontSize: 30
         }

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

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

值是数组:
<div v-bind:style="[style1, style2]"></div>

data: {
      style1:{
             color:"red"
             },
      style2:{
              background:"yellow",
              fontSize: "21px"
                     }
				}
 <span @click="num=0" :class="num==0?‘current‘:‘‘">国内新闻</span>
 <span @click="num=1" :class="num==1?‘current‘:‘‘">国际新闻</span>
 <span @click="num=2" :class="num==2?‘current‘:‘‘">银河新闻</span>

 <div class="list" :class="num==0?‘active‘:‘‘">国内新闻列表</div>
 <div class="list" :class="num==1?‘active‘:‘‘">国际新闻列表</div>
 <div class="list" :class="num==2?‘active‘:‘‘">银河新闻列表</div>

3 判断:条件渲染

v-if v-else v-else-if v-if="num == 1"

条件成立,就显示标签 直接去掉了标签 dom操作remove

v-show 通过display:none属性 显示隐藏属性 和 v-if 一样,标签的显示与隐藏

标签元素:
	<h1 v-if="num==1">num的值为1</h1>
	<h1 v-else-if="num==2">num的值为2</h1>
	<h1 v-else>num的值是{{num}}</h1>
data数据:
  		data:{
      		num:2
      }

4 循环:列表渲染

data:{

goods_list:[...字典等]}

v-for="goods in goods_list"

v-for="goods,index in goods_list"

参数1,参数2 : goods 列表的每个值, index 索引

列表:
<li v-for="value,index in book">{{value}}</li>  值 和 索引
字典:
<li v-for="attr, value in book">{{attr}}:{{value}}</li>  key 和 value

vue框架

标签:let   会同   dir   导入   多个   范围   识别   obj   ase   

原文地址:https://www.cnblogs.com/pythonwl/p/13143877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!