XueChProject02

最新推荐文章于 2020-07-16 23:34:34 发布

一觉睡到小小时候

最新推荐文章于 2020-07-16 23:34:34 发布

阅读量143

点赞数

分类专栏：测试文章

本文链接：https://blog.csdn.net/weixin_43983411/article/details/104959835

版权

本文介绍了VueJS的基础知识和实战应用，包括Vuejs的渐进式特性、V-Model、V-Text、V-Html、V-On和v-bind等指令的使用。同时，详细阐述了Webpack的安装和配置，以及在前端工程中使用Webpack进行模块化开发的过程，包括webpack-dev-server的安装和调试技巧。此外，还探讨了前端工程的搭建、单页面应用的优缺点，以及基于Vue的CMS前端页面开发，涉及到ElementUI组件库的使用和API调用方法。

摘要由CSDN通过智能技术生成

VueJS

Vuejs 介绍

1). vuejs 是渐进式前端框架 ; —> 在项目中, 可以只使用其中某些功能即可;

2). 使用方式 :
A. 在html页面中引入 vue.min.js 进行使用 ;
B. 可以使用vuejs结合webpack进行打包使用 ;
C. 可以使用官方推荐的 vue-cli 脚手架搭建工程 ;

3). 功能 : 声明式渲染 , 判断和循环 , 双向数据绑定 , 事件处理 ,组件化应用构建

入门案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 引入vue.js包 -->
    <script src="vue.min.js"></script>
</head>

<body>
<div id="app">
<!-- view -->
{
  {name}}
</div>



<!-- model and view -->
<script>
//编写MVVM的model部分和viewmodel 部分
var VM = new Vue({
    
        el:'#app', //接管
        data:{
    //model部分
            name:'高'
        }
    });
</script>

</body>





</html>

注意：vue不能接管body；创建vue对象时，可以不定义前面的变量

V-Model

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 引入vue.js包 -->
    <script src="vue.min.js"></script>
</head>

<body>
<div id="app">
<input type="text" v-model="num1" >+
<input type="text" v-model="num2" >=
<!-- Number.parsInt() 将字符串转变为数字 -->
{
  {Number.parseInt(num1)+Number.parseInt(num2)}}

<button>计算</button>