Vue 入门。

一、Vue是一套渐进式的前端框架，简化了JavaScript中的DOM操作，Vue 基于 MVVM （Model-View_ViewModel）思想，实现数据的双向绑定。

二、Vue的简单使用。

1、引入 Vue.js 文件。<script src="js/vue.js" />

2、在JS区域中创建 Vue 核心对象进行数据绑定。

new Vue({

　　el:目的地,

　　template:模板内容,

　　date(){

　　　　return {

　　　　}

});

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <p>{{ msg2 }}</p>
    </div>
    <!-- 1.引包 -->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // MVVM    Model  View  ViewModel
        
        //2.创建实例化vue对象
        // 插值模板语法 {{ }}  react: {} angular {{}}
        new Vue({
            el:"#app", //目的地
            template:``, //模板内容
            data :function(){
                // 声明的数据
                return {
                    msg:'大家学习vue3',
                    msg2:1==1
                }
            }
        });
    </script>
</body>
</html>

三、Vue 的插值表达式 {{}}。可以用于页面中简单粗暴的调试，必须在data这个函数中返回的对象中声明。

1、对象 {{ { name: 'tom'} }}。注意：不要连续3个{}，错误示范：{{{name: 'tom'}}}。

2、字符串 {'xxx'}。

3、判断后的布尔值 {{ true }}。

4、三元表达式 {{true?'正确':'错误'}}。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <h4>{{ {name:'tom'} }}</h4>
        <p>{{ msg2 }}</p>
        <p>{{1 > 2 ? '真的': '假的'}}</p>
    </div>
    <!-- 1.引包 -->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // MVVM    Model  View  ViewModel
        
        //2.创建实例化vue对象
        // 插值模板语法 {{ }}  react: {} angular {{}}
        new Vue({
            el:"#app", //目的地
            template:``, //模板内容
            data :function(){
                // 声明的数据
                return {
                    msg:'大家学习vue3',
                    msg2:1==1
                }
            }
        });
    </script>
</body>
</html>

四、Vue 中的指令。在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示；指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定。

1、v-text：只能用在双标签中，其实就是给元素的InnerText属性赋值，跟 {{}} 效果是一样的，使用较少。

2、v-html：其实就是给元素的 innerHTML 属性赋值。

<div v-html = 'msg2'></div>

3、v-if：判断是否插入这个元素，相当于对元素的销毁和创建。

　　v-else-if：v-if 和 v-else-if 都有对应的值

　　v-else：而 v-else 直接写，v-if 家族都是对元素进行插入和移除操作。

<div v-if = 'isShow'>哈哈哈哈</div>
<div v-if = 'Math.random() > 0.5'>
    此值大于0.5
</div>
<div v-else>
    此值小于0.5
</div>

4、v-show：隐藏元素，如果确定要隐藏元素，会给元素的 style 加上 display:none，这是基于 css 样式的切换显示与否的问题。

<div v-show = 'isShow'></div>

5、v-if 和 v-show 的区别。

　　v-if 是真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。　　v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。　　相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。　　一般来说，v-if 有更高的切换开销，而 v-show`有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show`较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、v-bind：绑定属性值，给元素的属性赋值 <div id="{{变量}}"></div>

　　可以给已存在的属性赋值，如input value

　　也可以给自定义的属性复制赋值，如myData

　　语法在元素上 v-bind:属性名="常量||变量"

　　简写形式 :属性名="变量"

<div v-bind:原属性名="变量"></div>
<div :属性名="变量">
</div>

7、v-for：可遍历数组或对象。

　　基本语法：v-for=“item in arr”

　　对象的操作：v-for=“item in obj”

　　如果数组中没有 id v-for="(item,idex) in arr "

　　各种 v-for 的属性顺序：数组 item，index；对象value，key，index

<ul>
    <li v-for = '(item,index) in menuLists'>
        <h3>{{ index }}</h3>
        <h5>{{item.name}}</h5>
        <h4>{{item.price}}</h4>
    </li>
</ul>
<ul>
    <li v-for = '(value,key) in object'>
        {{ key }} -- {{value}}
    </li>
</ul>

key：建议 v-for 加上 key 能够提升性能，避免Vue运算，key 就是记录元素与DOM间的位置关系。

<ul>
    <li v-for = '(item,index) in menuLists' :key='indx'>
        <h3>{{ index }}</h3>
        <h5>{{item.name}}</h5>
        <h4>{{item.price}}</h4>
    </li>
</ul>

8、v-on：绑定事件，处理自定义原生事件的,给按钮添加click并让使用变量的样式改变。

　　普通使用 v-on:事件名="表达式||函数名"

　　简写方式 @事件名=“表达式”

　　<script type="text/javascript">
        new Vue({
            el:'#app',
            template:`
                <div>
                    <p class ='po' :class=" {active:isRed} " >bing绑定</p>
                    <button @click = 'changeColor'>切换字体的颜色</button>
                </div>
            `,
            data:function(){
                return {
                    // msg:'active'
                    isRed:false
                }
            },
            methods:{
                changeColor(e){
                    console.log(e.target)
                    console.log(this);
                    this.isRed = !this.isRed;
                }
            }
        });
    </script>

9、v-model：双向数据流绑定，页面改变影响内存（js），内存（js）改变影响页面。

    <script type="text/javascript">
        new Vue({
            el:'#app',
            template:`
                <div>
                    <input type="text"  v-model = 'msg'/
                    <p>{{ msg }}</p>
                </div>
            `,
            data:function(){
                return {
                    msg:'hello 双向绑定'
                }
            }
        });

10、v-bind 和 v-model 的区别。

　　input v-model="name" 双向数据绑定，页面对于 input 的 value改变，能影响内存中的 name 变量。内存js改变 name 的值，会影响页面重新渲染最新值。

　　input :value="name" 单向数据绑定，内存改变影响页面改变。

　　v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染。

总结：v-model 值的改变可以影响其他；v-bind 值的改变不影响其他，但与事件的结合可实现和 v-model 一样的效果。

    <script type="text/javascript">
        new Vue({
            el:'#app',
            template:`
                <div>
                    <!-- <input type="text"  v-model = 'msg'/>-->
                    <input type="text"  v-bind:value = 'msg' v-on:input = 'change'/>
                    <p>{{ msg }}</p>
                </div>
            `,
            data:function(){
                return {
                    msg:'hello 双向绑定'
                }
            },
            methods:{
                change(e){
                    console.log(e.target.value);
                    this.msg = e.target.value;
                }
            }
        });
    </script>

posted @ 2022-11-16 20:24 炒股沦为首负阅读(26) 评论(0) 收藏举报

刷新页面返回顶部

Vue 入门。

公告