vue入门学习速成

飞一样的编程
飞一样的编程
擅长邻域:Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

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

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

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>

4.生命周期

生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。

案例代码:

前端vue。后端用ssm框架开发。实现单表的增删改查

代码地址:

链接:https://pan.baidu.com/s/18OT_r0DN-XiR1DWXkA4m-g

提取码:dgz0

好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695