Vue基础知识

最新推荐文章于 2022-10-17 17:10:08 发布

xqiitan

最新推荐文章于 2022-10-17 17:10:08 发布

阅读量141

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/xqiitan/article/details/90373011

版权

VUE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Vue-cli   官方命令行工具
sodo   npm install -g vue-cli
   vue init webpack my-project(用默认值即可)
   npm install && npm run dev

vue init mpvue/mpvue-quickstart my-project

前端注意事项，先cd到项目目录：cd vue-demo；
然后使用命令：npm run dev

字符串渲染：
main.js

new Vue({
  el: '#app',
  data: {
    title: 'hello vue js 0520',
    subTitle: 'VUE Base 01',
    showSub: false,
    todos: ['吃饭', '睡觉', '打豆豆']
  }
})

index.html

 <body>
    <div id="app">
      <p>{{title}}</p>
      <!--条件渲染true显示，false不显示-->
      <p v-if="showSub">{{subTitle}}</p>
      <ul>
        <li v-for='todo in todos'>{{todo}}</li>
      </ul>
    </div>
  </body>

------------------给列表动态添加内容-----------------------------

<body>
    <div id="app">
      <p>{{title}}</p>
      <!--条件渲染true显示，false不显示-->
      <p v-if="showSub">{{subTitle}}</p>
      <div>
        <input type="text" v-model="mytodo">
        <!--处理点击事件【添加】-->
        <button @click="handleClick">添加</button>
      </div>
      <ul>
        <li v-for='todo in todos'>{{todo}}</li>
      </ul>
    </div>
  </body>

new Vue({
  el: '#app',
  data: {
    title: 'hello vue js 0520',
    subTitle: 'VUE Base 01',
    showSub: false,
    mytodo: '',
    todos: ['吃饭', '睡觉', '打豆豆']
  },
  methods: {
    // 点击事件响应
    handleClick () {
      // 响应式，直接修改字段即可更新UI
      // this.title = 'hello 小程序'
      // this.todos.push('写小程序')
      console.log(this.mytodo)
      this.todos.push(this.mytodo)
      this.mytodo = ''
    }
  }
})

xqiitan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识

Vue-cli 官方命令行工具sodo npm install -g vue-cli vue init webpack my-project(用默认值即可) npm install && npm run dev vue init mpvue/mpvue-quickstart my-project前端注意事项，先cd到项目目录：cd v...
复制链接

扫一扫