一、vue2.0——基础知识

最新推荐文章于 2022-09-19 21:49:55 发布

qq_36873912

最新推荐文章于 2022-09-19 21:49:55 发布

阅读量111

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_36873912/article/details/82909881

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、基本结构

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

html

<template></template>
<script>
import store from "@/vuex/xx";
export default {

};
</script>

二、基本指令

1.v-if v-else：判断
2.v-show：控制元素是否显示

3.v-for:循环（一维数组）

vue

 <li v-for="item in items">
        {{item}}
</li>

var app=new Vue({
     el:'#app',
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

4.排序-内部

//computed里新声明了一个对象sortItems 以防污染原来的item
computed:{
    sortItems:function(){
          return this.items.sort();
    }
}

html

 <li v-for="item in  sortItems">
      {{item}}
 </li>

5.排序-外部方法

js：定义sortNumber方法

function sortNumber(a,b){
        return a-b
}

调用

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
 }

6.v-for:循环（对象）

定义对象数据

data:{
    students:[
        {name:'jspang',age:32},
        {name:'Panda',age:30},
        {name:'PanPaN',age:21},
        {name:'King',age:45}
    ]
},

循环输出

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

7.v-text & v-html
- v-text:网速很慢或者javascript出错时，会暴露我们的{{xxx}} 解决方式就是改写成以下形式
```
<span>{{ message }}</span>
<span v-text="message"></span>
```
- v-html:如果有html代码则用v-html
```
<span v-html="msgHtml"></span>
data:{
  msgHtml:'<h2>hello Vue!</h2>'
}
```

7.v-on事件监听器

html

<button v-on:click="jiafen">加分</button>
<button @click="jiafen">加分</button>  //简写
//键盘回车事件v-on:keyup.enter
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

var app=new Vue({
    el:'#app',
    data:{
        count:1
    },
    methods:{
        jiafen:function(){
            this.count++;
        },
        onEnter:function(){
		     this.count=this.count+parseInt(this.secondCount);
		     //文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。
		}
    }
})

8.v-model

html

<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

9.v-model应用

——多选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

——多选绑定一个数组

<p>
   <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
    <label for="JSPang">JSPang</label><br/>
    <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
    <label for="JSPang">Panda</label><br/>
    <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
    <label for="JSPang">PanPan</label>
    <p>{{web_Names}}</p>
</p>

——单选按钮绑定数据

<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>

10.修饰符
- .lazy：取代 imput 监听 change 事件。
- .number：输入字符串转为数字。
- .trim：输入去掉首尾空格。

11.v-bind：绑定属性

html

<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
    //简写
     <img :src="imgSrc"  width="200px">
</div>

var app=new Vue({
    el:'#app',
    data:{
          imgSrc:'xxurl'
     }
})

12.v-bind:绑定class

1、直接绑定class样式

<div :class="className">1、绑定classA</div>

2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
```
<div :class="{classA:isOk}">2、绑定class中的判断</div>
```

3、绑定class中的数组

<div :class="[classA,classB]">3、绑定class中的数组</div>

4、绑定class中使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5、绑定style

<div :style="{color:red,fontSize:font}">5、绑定style</div>

6、用对象绑定style样式

<div :style="styleObject">用对象绑定style样式</div>
var app=new Vue({
   el:'#app',
   data:{
       styleObject:{
           fontSize:'24px',
           color:'green'
            }
        }
})

13.其他内部指令(v-pre & v-cloak & v-once)
- v-pre指令：在模板中跳过vue的编译，直接输出原始值{{message}}。
```
<div v-pre>{{message}}</div>
```
- v-cloak指令：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
```
[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>
```
- v-once指令：在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
```
<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
```

qq_36873912

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一、vue2.0——基础知识

一、搭建临时的服务NPM全局安装cnpm install live-server -g在项目根目录使用命令live-server运行npm run server二、基本结构&amp;lt;head&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;../assets/js/vue.js&quot;&amp;
复制链接

扫一扫