Vue框架之基础知识

时间：2024-05-24 10:07:02

　　在没有学习基础知识之前，我们需要下载vue的js文件，在使用vue语法之前引包

<script src='./vue.js'></script>

一、模板语法

　　模板语法是一种可以渲染动态数据的语法，数据需要在script中声明。

<script>

    //2.实例化对象

    new Vue({

        el:'#app', //绑定那块地

        data:{

            //数据属性  种子

            msg:'黄瓜',

            person:{

                name:'wusir'

            },

            msg2:'hello Vue',

            text:'<h2>日天</h2>'

        }

    });

</script>

　　然后去div渲染数据

　　需要注意的是，标签定义的id要与js中绑定的id一致，不然vue匹配不到相应的标签，无法渲染。

<div id="app">

    <!--模板语法-->

    <h2>{{ msg }}</h2>

    <h3>{{ 'hhahda' }}</h3>

    <h3>{{ 1+1 }}</h3>

    <h4>{{ {'name':'alex'} }}</h4>

    <h5>{{ person.name }}</h5>

    <h2>{{ 1>2? '真的': '假的' }}</h2>

    <p>{{ msg2.split('').reverse().join('') }}</p>

    <div>{{ text }}</div>

</div>

　　由此可见，模板语法支持传输字符串，对象，变量，更能运算加减法。

二、指令运用

　　1.v-text 与 v-html

<div id="content">

    {{ msg }}

    <div v-text="msg"></div>

    <div v-html="msg"></div>

</div>
<script src='./vue.js'></script>

<script>

//    new Vue({

//      el:'#app',

//    })

    new Vue({

        el:'#content',

        data () {

            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return

            return {

                msg:"<h2>alex</h2>"

            }

        }

    })

</script>

　　验证两者之间的区别，v-text不能渲染字符串中的标签，而v-html可以渲染

　　2.v-if与v-show

//v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。//
<div class="box" v-show='isShow'></div>
<div class="box2" v-if="isShow"></div>


<script>
    //数据驱动视图
    new Vue({
        el: '#content',
        data() {
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                msg: "<h2>alex</h2>",
                num: 1,
                isShow: true
            }
        },
        methods: {
            add(x, y) {
                console.log(this.num);
                return x + y
            },
            handlerClick() {
                //数据驱动
                console.log(this);
                this.isShow = !this.isShow;

            }
        }
    })
</script>


 




　　3.v-on、v-bind、v-for


　　




  // 1.事件源 2.事件  3.事件驱动程序

vue中使用v-on:click对当前DOM绑定click事件 注意:所有的原生js的事件使用v-on都可以绑定

v-if和v-on 来对页面中DOM进行操作

v-bind:class和v-on对页面中DOM的样式切换

v-bind和v-on

在vue中它可以简写: v-bind:

:class 等价于 v-bind:class

:src 等价于v-bind:src

:id 等价于v-bind:id

v-on:click   等价于 @click = '方法名'

v-text  v-html  {{}}: 对页面的dom进行赋值运算   相当与js中innerText innerHTML

v-if = 'true':

//创建

var oP =   document.createElement('p')  ;

oDiv.appendChild(op)

v-if = 'false'

//销毁

oDiv.removeChild(op)

v-show = 'true'

oDiv.style.display = 'block'

v-show:'true'

oDid.style.display = 'none'

v-bind:class

oDiv.className += ' active'

/*

渐进式的JavaScript框架

做加法和做减法:大部分的人觉得做加法简单,做减法难

vue这个框架 将 做减法的事情都给咱们做了(难的部分)

学习简单的部分就能实现复杂的dom操作

*/




　　


　
相关文章