vue

最新推荐文章于 2022-04-17 00:34:22 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/qq_43719280/article/details/88983026

版权

Vue

Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。
Vue是一个渐进式的js框架

特性

❤轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
❤数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
❤指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
❤插件化
Vue.js核心不包含Router（路由）、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
❤组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
允许大写自定义标签

MVVM模式（Model-View-ViewModel）

ViewModel是Vue.js的核心，它是一个Vue实例
在这里插入图片描述
双向绑定，一方修改，两边都会同时修改
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

语法

在这里插入图片描述

El

指定相应的挂载对象
可以使用id,class,标签(建议使用id挂载)
挂载后代表这个标签被vue接管

Data

vue对象准备的数据
这个数据发生变化后,用到它的view部分值也改变

Methods

vue中对象的方法
在html中 {{方法()}}
在js vue对象.方法()
方法中的this就是指这个vue对象

vue指令

指令就是 v-属性
v-text,v-html :展示相应的数据
v-for ：循环
v-bind: 绑定属性
v-model: 数组双向绑定(input,select,textarea)
v-show：显示也隐藏
v-if: 判断
v-on: 注册事件

v-text和v-html的区别：
v-html会读到html标签(会显示标签的效果)
v-text会把标签当做字符串显示
注意:标签中如果加了它们，里面的值就会被替换

v-for

可以循环数组,对象，数字与字符串
<div id="app">
    直接拿到数组中的值
    <div v-for="v in hobbys">{{v}}</div>
     直接拿到数组中的值与索引
    <div v-for="(v,i) in hobbys">{{v}}</div>
     直接拿到对象的属性值
    <div v-for="v in user">{{v}}</div>
    直接拿到对象的属性值，属性名,索引
    <div v-for="(v,k,i) in user">{{v}}</div>
</div>

new Vue({
    el:"#app",
    data:{
        hobbys:["空调","吃饭","睡觉","打豆豆"],
        user:{
            id:1,
            username:"隔壁王哥",
            age:45,
            sex:true
        },
        num:10,
        name:"it"
    }
})

v-bind: 绑定属性

可以让属性在vue对象中取值
<div id="app">
    标签形式
    ![在这里插入图片描述]()
    简写形式
    ![在这里插入图片描述]()
    直接绑定所有属性
     ![在这里插入图片描述]()
</div>

new Vue({
    el:"#app",
    data:{
        src:"1.jpg",
        attr:{
            src:"1.jpg",
            width:40,
            height:40
        }
    }
})

v-model: 数组双向绑定

只能作用于(input,select,textarea)
<div id="app">
    <input type="text" v-model="textVal">
    {{textVal}}
</div>

new Vue({
    el:"#app",
    data:{
        textVal:"xxxx"
    }
})

v-show:展示与隐藏

只是隐藏(display:none)
<div id="app">
  <div v-show="true">显示我吧</div>
  <div v-show="show">显示我吧</div>
</div>

new Vue({
    el:"#app",
    data:{
        show:true
    }
})

v-if:判断

v-if,v-else-if,v-else(不显示dom元素就删除)

<div id="app">
 <div v-if="score>=90">你很棒</div>
 <div v-else-if="score>=60 && score<90">你努力</div>
 <div v-else>你不行</div>
</div>

new Vue({
    el:"#app",
    data:{
        score:80
    }
})

v-on:注册事件

<div id="app">
 标准写法
 <button v-on:click="alert(0)"></button>
 简写形式
 <button @click="alert(1)"></button>
 调用方法(加不加括号都可以实现)
 <button @click="say"></button>
 <button @click="say()"></button>
</div>

new Vue({
    el:"#app",
    data:{
        score:80
    },
    methods:{
        say(){}
    }
})

组件

注意事项：

  	一定要先定义组件,再进行vue的挂载
 	模板中必需有一个根标签
   	取名的问题
    如果使用驼峰命名法 myTag -> <my-tag>

1．全局组件---->>>>>所有被挂载的位置都可以使用

 Vue.component("mytag",{
        template:"<div>我有100句代码!</div>"
    });

2．局部组件---->>>>>只能在当前被挂载的元素中使用

 new Vue({
        el:"#app",
        //创建局部的组件
        components:{
            //组件的名称
            "mytag":{
             template:"<div>我是一个局部的组件！</div>"
            }
        }
    })

路由

<div id="app">
		<!-- 使用 router-link 组件来导航. -->
		<!-- 通过传入 `to` 属性指定链接. -->
		<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
		<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
		<router-link to="/product">产品</router-link>
		<router-link to="/about">关于</router-link>
		<hr />
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view></router-view>
	</div>
	<script type="text/javascript" src="js/vue/vue.js"></script>
	<script type="text/javascript" src="js/vue/vue-router.js"></script>
	<script type="text/javascript">
		//>>1.定义首页:组件
		var index = Vue.component("index", {
			template : "<h1>首页</h1>"
		});
		//>>2.公司产品：组件
		var product = Vue.component("product", {
			template : "<h1>公司产品</h1>"
		});
		//>>3.关于我们：组件
		var about = Vue.component("about", {
			template : "<h1>关于我们</h1>"
		});

		//>>4.创建一个路由：
		var router = new VueRouter({
			routes : [ {
				path : "/",//路由地址
				component : index
			//路由对应的资源
			}, {
				path : "/about",//路由地址
				component : about
			//路由对应的资源
			}, {
				path : "/product",
				component : product
			}, ]
		});

		//创建一个vue对象
		var app = new Vue({
			el : "#app",//挂载在app上
			router : router
		//使用路由对象
		});
	</script>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

VueVue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。Vue是一个渐进式的js框架特性❤轻量Vue.js库的体积非常小的，并且不依赖其他基础库。❤数据绑定对于一些富交互、状态机类似的前端UI界面，数据绑定非常简...
复制链接

扫一扫