0807 创建vue实例以及vue的基础指令

Posted wangwenxin123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了0807 创建vue实例以及vue的基础指令相关的知识,希望对你有一定的参考价值。

lession1
1.Vue的了解  
渐进式框架   作者:尤雨溪     mvvm
2.创建vue实例
引入<script src="vue.js"><script>
<body>
    <div id="myApp">
   
    </div>
</body>
<script>
    new Vue(
        el:"#myApp",// 挂载
        data:// 是你的数据状态。
            str:""
        
    )
</script>
 
3.基础指令  directive
    vue对元素属性的扩展    以v-开头
v-model   可以将你的表单元素    与 你的数据进行绑定  
               修饰符: 该指令的属性
                number: 将所绑定的元素的值设定为 number  
                trim: 去除空格
                lazy:当失去焦点的时候,才会与你的数据产生响应
v-if  值是一个布尔,用于是否渲染
v-else-if    v-else   v-if    
 
 
v-for  遍历数据( 字符串,数字,对象,数组)
v-bind    将你的数据与你的元素属性进行绑定   简写 :
v-show   用于隐藏或显示
 
 
v-on 绑定事件   简写
v-once  用于初始值
v-pre   跳过该区域
 
:输出数据,写表达式。
 
附:js的一种取反操作:
        const str = "中华人民共和国";
     console.log(str.split("").reverse().join(""))
 
事件实例:
<script src="vue.js"><script>
<body>
<div id="myApp">
    <!--方法后面的括号 要不要加 ,可以加-->
    <input type="button" v-on:click="changeIsShow" value="显示与隐藏">
    <input type="button" @click="changeIsShow" value="@显示与隐藏">
    <div v-show="isShow">
        我在马路边捡到一分钱,所它交给警察叔叔手里面。
    </div>
</div>
</body>
<script>
    new Vue(
        el:"#myApp",
        // 存放你的状态。
        data:
            isShow:true
        ,
        // 将你的函数方法写在这里
        methods:
            // 方法
            changeIsShow()
                this.isShow = !this.isShow;
                // console.log(this.isShow);
            
        
    )
</script>
 
 
 
 
 
重点面试相关问题:
 
1.mvvm和mvc的区别
    mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View 。
2.vue中为什么自定义组件data定义成一个函数?
   主要是防止组件与组件之间,声明的变量互相影响,他们是互相独立的,互补干扰
   组件复用时所有组件实例都会共享 data,如果 data 是对象的话,就会造成一个组件修改 data 以后会影响到其他所有组件,所以需要将 data 写成函数,每次用到就调用一次函数获得新的数据。
 

以上是关于0807 创建vue实例以及vue的基础指令的主要内容,如果未能解决你的问题,请参考以下文章

vue基础特性

vue 基础之基本指令以及使用

Vue:基础语法、创建组件、组件间传值、实例生命周期

Vue表单输入绑定

vue详细操作目录-基础篇

Vue3基础部分