vue安装与使用

vue的安装与使用

• 先提前全局安装@vue/cli：

windows：npm i -g @vue/cli

mac：sudo npm i -g @vue/cli

通过使用node -v命令查看是否安装成功

• 安装vue项目包
• vue create myapp myapp为项目名称。注意: 项目名不能带大写字母, 中文和特殊符号。上下箭头选择, 弄错了ctrl+c重来

• npm run serve 进行启动项目或npm run dev

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

vue举例

 <template>
 <div>
<h1>{{ message }}</h1>
<button @click="btn">逆转世界</button>
</div>
</template>

<script>
   export default {
 data() {
return {
  message: "HELLO, WORLD",
};
},
methods: {
btn(){
  this.message = this.message.split("").reverse().join("")
}
}
};
</script>

vue 指令 ：v-bind 给标签属性设置vue变量的值

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

vue 指令 ：v-on 给标签绑定事件

• 语法

  • v-on:事件名="要执行的==少量代码=="

  • v-on:事件名="methods中的函数"

  • *v-on:事件名="methods中的函数(实参)"

    <!-- vue指令:   v-on事件绑定-->
    <p>你要买商品的数量: {{count}}</p>
    <button v-on:click="count = count + 1">增加1</button>
    <button v-on:click="addFn">增加1个</button>
    <button v-on:click="addCountFn(5)">一次加5件</button>
    ​
    <button @click="subFn">减少</button>
    ​
    <script>
        export default {
            // ...其他省略
            methods: {
                addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                    this.count++
                },
                addCountFn(num){
                    this.count += num
                },
                subFn(){
                    this.count--
                }
            }
        }
    </script>