vue入门学习速成

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

分类： vue 专栏： vue学习标签： vue学习

2023-01-14 13:57:07 1830浏览

vue入门学习速成

1.vuejs快速入门

vue是一个前端框架，核心概念就是数据双向绑定，免除原生JavaScript中的DOM操作，简化书写。
vue是如何简化dom书写的呢？

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

这是我们之前写的代码。是不是很繁琐，而采用了咱们vue的双向绑定思维，当数据模型数据发生变化时，页面的展示也随之发生变化。

2.使用步骤

新建HTML或者jsp,引入js

<script src="/static/vue.js"></script>

在JS代码区域，创建Vue核心对象，进行数据绑定

  new Vue({
        el:"#app",
        data(){
            return{
                brandForm:{}
            }
        },
        methods:{
            submitForm(){
                var that =this
               //把brandForm给后台
                axios({
                    method:"post",
                    data:that.brandForm,
                    url:"${pageContext.request.contextPath}/updateBrand"
                }).then(function (result) {

                    if(result.data.flag == true){
                        window.location.href="index.jsp"
                    }else {
                        alert("修改失败")
                    }

                })
            }
        }
    })

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值

data ：用来定义数据模型

methods ：用来定义函数。

编写视图

<div id="app">
  <input name="username" v-model="username" >
  {{username}}
</div>

{{}} 是 Vue 中定义的插值表达式，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

3.vue指令

v-model:在表单元素上创建双向数据绑定
v-bind:为HTML标签绑定属性值，如设置 href , css样式等
v-on:为HTML标签绑定事件
v-if:用于条件判断
v-show:用于条件判断-切换的是display属性的值

<div id="app">
    <h2>v-model:在表单元素上创建双向数据绑定</h2>
    <input type="text" v-model="url">
    {{username}}
    <h2>v-bind:为HTML标签绑定属性值，如设置 href , css样式等</h2>
    <a :href="url">点击跳转</a>
    <a v-bind:href="url">点击跳转2</a>

    <h2>v-on:为HTML标签绑定事件</h2>
    <button @click="show()">我是按钮</button>

    <h2>v-if:用于条件判断</h2>
    <input type="text" v-model="divs">
    <%--<div v-if="divs ==1">div1</div>
    <div v-else-if="divs ==2">div2</div>
    <div v-else>div3</div>--%>

    <h2>v-show:用于条件判断-切换的是display属性的值</h2>

    <div v-show="divs ==1">div1</div>
    <div v-show="divs ==2">div2</div>
    <div v-show="divs ==3">div3</div>
    <h2>v-for:遍历列表集合</h2>
    <ul>
      <li v-for="(c,index) in citys">{{index+1}}{{c}}</li>
    </ul>
  </div>
  <script>
 //vue的核心概念就是数据双向绑定——数据模型里的数据一变，页面随之变化
    new Vue({
      el:"#app",//指定哪些标签受 Vue 管理
      data(){//用来定义数据模型
        return{
          username:'',
          url:'https://baidu.com',
          divs:'',
          citys:['太原','长沙','武汉'],
          brands:[],
          searchForm:{}
        }
      },
      methods:{
        
        show(){
          alert("被点击")
        },
        
     
    })
</script>