vue初体验，组件，组件传值

最新推荐文章于 2021-12-12 21:59:11 发布

糖果的小九

最新推荐文章于 2021-12-12 21:59:11 发布

阅读量250

点赞数

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

本文链接：https://blog.csdn.net/qq_45271323/article/details/103251830

版权

vue初识

主流的三大框架

angular - 谷歌团队 (1.0 2.0 4.0版本) - mvc 双向数据绑定
react - facebook 团队虚拟dom
vue - 尤雨溪 - 双向数据绑定+虚拟dom

高效/特点

运行效率高，vue采用虚拟DOM,减少dom操作（运行过程中dom操作及其影响效率） - 虚拟DOM,就是内存总的一个对象，和dom结构相互对应
将开发者的精力从dom解放出来 , 转移到数据操作上

1.引入vue.js - 核心代码库
 <script src="vue.js"></script>
2.创建vue实例
new Vue({
   
    el:"" /指定要挂载的元素
    data: {
   
    /用于存放数据的状态
    },
    methods:{
   
    //方法
    }，
    filters:{
   
    //过滤器
    }
});
 new Vue({
   
        el:"#one",//id。
        el:".two",// class。
        el:"div",// 标签
        el:document.querySelector(".two"),// DOM元素。
        el:"body",  /[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
    })
Alt text

注意： 
1.多关注数据，少关注视图 
2.vue与js不是完全互通的 
3.vue是通过数据进行驱动的

vue初体验

<div id = 'yxm'>
    {
   {
   name}}
    <hr>
    {
   {
   sex}}
</div>
</body>
<script>
new Vue ({
    //实例化一个vue对象
	el:"#yxm", //页面中哪一个元素，以及子元素，需要被vue处理
	data:{
    //数据，只有data中的数据才能插值法（Mastache）进行渲染 - {
   {}} 数据绑定，将data里的数据渲染到页面上
        name:"殷乡梅",
        sex:'woman'
	}
})

在这里插入图片描述

数据类型

<div id="yxm">
    {
   {
   number++}}
    <hr>
    {
   {
   string}}
    <hr>
    {
   {
   bool}}
    <hr>
    {
   {
   arr}}
    <hr>
    {
   {
   obj}}
    <hr>
    {
   {
   null?"真null":"假null"}} //直接打印null和undefined是不显示东西的，不过可以通过三元运算符来查看
    <hr>
    {
   {
   und?"真un":"假un"}}
</div>
</body>
<script>
new Vue({
   
    el:'#yxm',
    data:{
   
        number:1,
        string:'殷乡梅',
        bool:true,
        arr:[1,2,3,4],
        obj:{
   us:123,ps:123},
        null:null, 
        und:undefined  
    }
})

在这里插入图片描述

内置指令 (v-开头)

对HTML元素属性进行的一个拓展，以v-开头

	v-model:用于你的表单元素。可将你的数据进行绑定（双向绑定）
	v-if:值是一个布尔值。如果满足条件则渲染，否则不渲染
	v-else-if：值也是一个布尔。如果满足条件渲染，否则不渲染。需要与v-if结合使用
	v-else:当v-if或v-else-if不满足时，使用。
	v-html:会将元素内的内容用指定的数据全部替换。可以使浏览器识别html元素
	v-text:会将元素内的内容用指定的数据全部替换。数据会做为文档格式来处理。
	v-for: 循环使用
	v-bind:可以将你的元素属性与你的数据状态进行绑定。简写：冒号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
    <div id="my">
        <div v-if="isLogin">请输入登录</div>
        <div v-else>欢迎您的到来</div>
        <input type="text" v-model.number="sex">
        <div v-if="sex===1">男</div>
        <div v-else-if="sex===2">女</div>
        <div v-else>未知</div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
   
        el:"#my",
        data:{
   
            isLogin:true,
            sex:21,
        },

    })
</script>
</html>

<body>
<div id="myApp">
    <!--数组 
        获取数组里的数据 
        键值对
    -->
    <div v-for="item in arr">{
   {
   item}}</div>
    <div v-for="(value,index) in arr">{
   {
   value}}:{
   {
   index}}</div>
    <!--对象 
         获取对象的属性
         获取对象的属性值
    -->
    <div v-for="item in obj">{
   {
   item}}</div>
    <div v-for="(value,key) in obj">{
   {
   key}}:{
   {
   value}}</div>  
    <!--数字,从1开始-->
    <div v-for="n in num">{
   {
   n}}</div>
    <!--字符串-->
    <div v-for="s in str">{
   {
   s}}</div>
</div>
</body>
<script>
    new Vue({
   
        el:"#myApp"