Vue原理和入门程序,以及简单应用

最新推荐文章于 2022-10-26 11:53:05 发布

hit、run

最新推荐文章于 2022-10-26 11:53:05 发布

阅读量162

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/java_zhulinghai/article/details/107405170

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

2.vue.js的三种使用方法

1）在html页面使用script引入vue.js的库即可使用。
2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。(大型应用推荐此方案。)
3）Vue-CLI脚手架(使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形)

3.vue.js入门程序

vue.min.js可以从我的链接下载:
https://pan.baidu.com/s/1FMMou-eMmJhuAJtlLQhyQw 提取码: 7pur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF‐8">
    <title>hello vue</title>
    <script src="vue.min.js"></script>
</head>
<body>
 <div id="app">
    {{name}}
 </div>

</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"赵四"
        }
    });
</script>
</html>

4.vue.js的v-model双向数据绑定

4.1)v-model只能在如下元素中使用:

input
select
textarea
components（Vue中的组件）

4.2)v-model使用举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF‐8">
    <title>hello vue</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
大大<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
{{Number.parseInt(num1)+Number.parseInt(num2)}}
<button>计算</button>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num1:1,
            num2:1
        }
    });
</script>
</html>

4.3)效果图:
在这里插入图片描述

5.vue.js中v-text属性解决{{name}}的闪烁问题

<span v-text="name"></span>

6.vue.js中v-on的使用

v-on监听用户事件

<button v-on:click="change">计算</button>
 methods:{
            change:function(){
                this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2);
            }
        }

7.vue.js中v-bind的使用

1、作用：
v‐bind可以将数据对象绑定在dom的任意属性中。
v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class
2、举例：
<img v‐bind:src="imageSrc">
<div v‐bind:style="{ fontSize: size + 'px' }"></div>
3、缩写形式
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>

应用举例:

<a v-bind:href="url">
        <span v-text="name"></span>
 </a>
  var vm = new Vue({
        el:"#app",
        data:{
            name:"大大",
            num1:0,
            num2:0,
            result:0,
            url:"https://www.baidu.com"

        },

8.vue.js中v-if和v-for的使用

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF‐8">
    <title>hello vue</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
    <li v-for="(a,b) in list" :key="a" v-if="b % 2 ==1">{{a}}=={{b}}</li>
    <li v-for="(value,key) in user" >{{value}}=={{key}}</li>
    <li v-for="(item,index) in userList" :key="index">
        <div v-if="item.user.name=='zs'" style="background: #00b3ee">
                {{item.user.name}}
        </div>
        <div v-else="" >
            {{item.user.name}}
        </div>
    </li>
</ul>

</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            list:[1,2,3],
            user:{name:'zs',age:10},
            userList:[
                {user:{name:'zs',age:10}},
                {user:{name:'ls',age:20}}
            ]

        }
    });
</script>
</html>

hit、run

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue原理和入门程序,以及简单应用

1.什么是vue.jsVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架2.vue.js的三种使用方法1）在html页面使用script引入vue.js的库即可使用。2）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。(大型应用推荐此方案。)3）Vue-CLI脚手架(使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形)3.vue.js入门程序vue.min.js可以从我的链接下载:https://pan.baid
复制链接

扫一扫