vue语法【笔记】

这里写目录标题

  • 为什么要使用MVVM
    • VUE基础语法学习
      • 代码 demo2.html
      • 案例结果:
      • 代码 demo03.html
      • 测试结果:
      • 代码demo04
      • 案例测试结果:

为什么要使用MVVM

  • MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处
  • 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
  • View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  • 可复用:你可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
  • 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
  • 可测试:界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

VUE基础语法学习

代码 demo2.html

if else 语法 【条件判断语法】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语法if-elsetitle>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>


<div id="app1">
    
    

    
    <p v-if="type === 1">数据就是1p>
    <p v-else-if="type === 2">数据是2p>
    <p v-else-if="type === 3">数据是3p>
    <p v-else>没有这个数据p>
    <h1 v-if="type === 1">练习1h1>
div>

<script>
    <!--3.model层 数据-->
    let vm = new Vue({
        el: "#app1",
        data: {
            type: 1,
        }
    });
script>

body>
html>

案例结果:

vue语法【笔记】_第1张图片

代码 demo03.html

for循环获取数据

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环title>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>


<div id="app1">
    <ul>
        
        <li v-for="term in items">
            <h1>{{ term.message }} 他的id为:{{ term.id }}+他的年龄为:{{ term.age }}h1>
            <hr>hr>
        li>
    ul>


div>

<script>
    <!--2. model层 数据-->
    let vm = new Vue({
            // 相当于映射的关系,也就是通过这个找到相对应的页面模板  [找页面模板,存放下面的数据]
            el: "#app1",
            //数据对象
            data: {
                //数组  【data里面存放数组】
                items: [
                    //对象
                    {message: "leslie1测试1", id: 1, age: 18, say: "yes"},
                    {message: "leslie2测试2", id: 2, age: 89, say: "yes"},
                ]
            }
        })
    ;
script>

body>
html>

测试结果:

vue语法【笔记】_第2张图片

代码demo04

事件绑定

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定title>
    
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>


<div id="app1">

    
    <button v-on:click="HiLeslie">点击button>
    <span v-bind:title="message">点击输出提示信息span>
div>
<script>
    <!--2.model层 数据-->
    let vm = new Vue({
            el: "#app1",
            data: {
                message: "helloLeslie事件绑定测试" + new Date().toISOString(),
            },
            //添加一个方法,通过点击事件触发他
            methods: {
                HiLeslie: function () {
                    alert(this.message);
                }
            }
        })
    ;
script>

body>
html>

案例测试结果:

vue语法【笔记】_第3张图片

语法主要就是这三种:

判断
循环
事件

vue的7个属性 【也就是标签的作用】===========================**

  • el属性

用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。

  • data属性

用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。

  • template属性

用来设置模板,会替换页面元素,包括占位符。

  • methods属性

放置页面中的业务逻辑,js方法一般都放置在methods中

  • render属性

创建真正的Virtual Dom

  • computed属性

用来计算

Vue.js 计算属性,计算属性在处理一些复杂逻辑时是很有用的

  • watch属性

Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化

watch:function(new,old){} 监听data中数据的变化 两个参数,一个返回新值,一个返回旧值。

render属性

创建真正的Virtual Dom

  • computed属性

用来计算

Vue.js 计算属性,计算属性在处理一些复杂逻辑时是很有用的

  • watch属性

Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化

watch:function(new,old){} 监听data中数据的变化 两个参数,一个返回新值,一个返回旧值。

以上就是vue常用的7个属性,当然vue的属性可不知这些,开发需要的话可以在官网查阅剩余属性。

你可能感兴趣的:(vue,vue)