Vue指令学习 | 零基础入门

文章目录

MVVM

• M：模型(Model) ：对应 data 中的数据
• V：视图(View) ：模板
• VM：视图模型(ViewModel) ： Vue 实例对象Tip：V 视图可以 与 VM视图模型 的代码结合书写

el: 挂载点

el作用是为vue实例提供

挂载元素

，指明Vue实例的

挂载目标

data: 数据

data选项可以定义数据，这些数据可以

绑定

到实例对应的模板中

methods: 方法

<divid="app"><p>{{ showInfo() }}</p></div><script>var vm =newVue({//实例化vue对象// el属性：指定程序界面// data属性：指定程序使用数据
            el:'#app',
            data:{
                name:'wei_shuo',
                url:'www.csdn.net'},
            methods:{
                showInfo:function(){//return this.$data.name + ":" + this.url;        两种写法returnthis.name +":"+this.url;}}});</script>

// 页面显示    wei_shuo : www.csdn.net

指令

格式 指令:参数.修饰符=“表达式(变量)” 指令:参数="表达式(变量)"

v-text

定义纯文本

<divid="app"><h3v-text="name"></h3><h3> {{ name }} </h3>        //v-text="name"的缩写
</div><script>var  app =newVue({
        el:"#app",
        data:{
            name:"周杰伦"}});</script>
// 页面显示    周杰伦

v-html

定义纯文本，且可以编译识别html标签

<divid="app"><h3v-html="name"></h3></div><script>var  app =newVue({
        el:"#app",
        data:{
            name:"<h1>周杰伦</h1>"}});</script>
// 页面显示    周杰伦

v-html 和 v-text 区别

v-text无法编译识别html标签，而html可以编译识别

<divid="app"><pv-text="name1"></p><pv-html="name2"></p></div><script>var app =newVue({
        el:"#app",
        data:{
            name1:"<h1>周杰伦</h1>",
            name2:"<h1>周杰伦</h1>"}});</script>
// 页面显示    name1 ：<h1>周杰伦</h1>        name2 ： 周杰伦

v-model

• v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素
• v-model = v-bind + v-on
• 获取和设置表单元素的值(双向数据绑定)
• 绑定数据 -----表单元素的值(同步更新)

<divid="app"><!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 --><inputtype="text"v-model="message">{{message}}
  </div><script>const app =newVue({
      el:"#app",
      data:{
        message:"wei_shuo"}})</script>

<divid="app"><!--        双向绑定--><inputtype="text"v-model="message"@keyup.enter="getM"><h2>{{message}}</h2><inputtype="button"value="修改message"@click="setM"></div><script>var app =newVue({
            el:"#app",
            data:{
                message:"wei_shuo"},
            methods:{
                getM:function(){alert(this.message)//创建getM方法验证，v-model是否双向绑定},
                setM:function(){this.message ="lishun";//创建setM方法验证，v-model是否双向绑定}},})</script>

v-on

• v-on指令作用是为元素绑定事件
• v-on指令可以简写为@:on
• 绑定的方法在methods中
• 方法内部通过this关键字访问定义在data中的数据

<divid="app"><divclass="inpute-num"><button@click="sub">
            -
        </button><span>{{ num }}</span><button@click="add">
            +
        </button></div></div><script>var app =newVue({
        el:"#app",
        data:{
            num:1},
        methods:{
            add:function(){// console.log('add')if(this.num <10){this.num++;}else{alert('别点了，最大了')}},
            sub:function(){// console.log('sub')if(this.num >0){this.num--;}else{alert('别点了，最小了！')}}}})</script>

v-on事件修饰符

• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 定义方法时，需要定义形参来接收传入的实参
• 事件的后面跟上 .修饰符 可以对事件进行限制
• .enter可以限制触发的按键为回车

<divid="app"><inputtype="button"value="点击"@click="doIT(666,'老铁')"><!--      输入文字触发方法--><!--      <input type="text" @keyup="sayHi"> -->
            输入文字触发方法
            <inputtype="text"@keyup.enter="sayHi"></div><script>var app =newVue({
        el:"#app",
        methods:{
          doIT:function(p1,p2){
            console.log("做IT");
            console.log(p1);
            console.log(p2);},
          sayHi:function(){alert("吃了没")}}})</script>

v-show

切换元素的显示状态 true显示 false隐藏

<divid="app"><inputtype="button"value="切换显示状态"@click="changeIsShow"><br><imgv-show="isShow"src="img/monkey.png"alt=""></div><script>const app =newVue({
        el:'#app',
        data:{
            isShow:false,
            age:17},
            methods:{
                changeIsShow:function(){this.isShow =!this.isShow;//通过调用对isShow的值进行取反}}})</script>

v-bind

• v-bind作用：动态绑定属性
• 除了内容需要动态决定，属性我们也希望动态绑定 比如a元素的href属性、img元素的src属性

<divid="box"><imgv-bind:src="url"></div><script>let myDate ={
          url :'images/00.jpg'//绑定图片地址};let demo =newVue({
        el :'#box',
        data : myDate
      });</script>

条件判断

v-if

<divid="app"><divv-if="score>=90">
        wei_shuo入选CSDN最热博主
    </div></div><script>var demo =newVue({
        el:'#app',
        data:{
            score:90//分数}})</script>

// 页面显示    wei_shuo入选CSDN最热博主

v-else

搭配 v-if 使用

<divid="app"><divv-if="score>=90">
        wei_shuo入选CSDN最热博主
    </div><divv-else>
        你说得对
    </div></div><script>var demo =newVue({
        el:'#app',
        data:{
            score:80//分数}})</script>

// 页面显示    你说得对

v-else-if

搭配 v-if v-else 使用

<divid="app"><divv-if="score>=90">
        wei_shuo入选CSDN最热博主
    </div><divv-else-if="score>=60">
        wei_shuo入选bilibili最热博主
    </div><divv-else>
        你说得对
    </div></div><script>var demo =newVue({
        el:'#app',
        data:{
            score:60//分数}})</script>

// 页面显示    wei_shuo入选bilibili最热博主

v-for

• 根据数据生成列表结构
• 数组经常和v-for结合使用
• 语法是(item,index) in 数据

案例：实现菜名添加和删除

<divid="app"><inputtype="button"value="添加数据"@click="add"><inputtype="button"value="删除数据"@click="remove"><ul><liv-for="(item,index) in arr">
          {{ index + 1}} wei_shuo:{{ item }}
        </li></ul><h2v-for="item in vegetables"v-bind:title="item.name">
        {{item.name}}
      </h2></div><script>var app =newVue({
        el:'#app',
        data:{
          arr:["北京","广州","上海","深圳"],
          vegetables:[{name:"番茄炒鸡蛋"},{name:"鸡蛋炒番茄"}]},
        methods:{
          add:function(){this.vegetables.push({name:"花菜炒蛋"})//创建添加方法},
          remove:function(){this.vegetables.shift()//创建删除方法}}});</script>

v-if 和 v-show 区别

v-if 和v-show 实现的功能类似，但是两者也有着本质的区别

• 在进行 v-if 切换时，因为v-if 中的模板可能包括数据绑定或子组件，所以Vue.js会有一个局部编译/卸载的过程。而在进行v-show切换时，仅发生了样式的变化。因此从切换的角度考虑，v-show 消耗的性能要比v-if小
• v-if 是惰性的，如果在初始条件为 false 时，v-if 本身什么都不会做，而使用v-show 时，不管初始条件是真是假，DOM 元素总是会被渲染。因此从初始渲染的角度考虑，v-if 消耗的性能要比v-show 小。总的来说，v-if 有更高的切换消耗而v-show 有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用v-if 较好