资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue.js2.0学习重点记录-创新互联

Vue.js兼容性

Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器。

为奎屯等地区用户提供了全套网页设计制作服务,及奎屯网站建设行业解决方案。主营业务为成都网站制作、成都网站建设、奎屯网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

Vue.js安装

安装方式有两种:

1、直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告)

2、使用cdn方法引入

3、npm安装

   npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs

   附上一小段nvm使用的命令:

$ nvm install v6.10.2
   $ nvm list 
    * 6.10.2 (Currently using 64-bit executable)
   $ nvm use 6.10.2
   Now using node v6.10.2 (64-bit)
   $ node -v
   v6.10.2
   $ npm -v   3.10.10
  
   $ npm install Vue.js
   或者:
   $ cnpm install bower
   $ bower install Vue.js

   注意:可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装Vue.js等模块了:

$ cnpm install vue

Vue.js脚手架安装

  port可以改成我们指定的端口,这里不仅可以改变端口,还可以根据需要改变其他配置信息。

# 全局安装 Vue.js-cli
$ npm install --global Vue.js-cli
# 创建一个基于 webpack 模板的新项目
$ Vue.js init webpack my-project
# 切换到项目目录,安装依赖
# 下面出现的所有提示 直接回车则选择默认选项或者yes
$ cd my-project
$ npm install# 运行该项目
$ npm run dev
DONE  Compiled successfully in 4388ms> Listening at http://localhost:8080* 这里默认8080端口,如果想要更改指定端口,找到根目录下config文件夹---index.js
dev: {  
  env: require('./dev.env'),  
  port: 8080,  
  autoOpenBrowser: true,  
  assetsSubDirectory: 'static',  
  assetsPublicPath: '/',  
  proxyTable: {},  
  cssSourceMap: false  }

建好Vue.js项目之后,想要再次localhost:8080下运行起来,在cmd命令框,进入项目根目录文件夹路径下,然后

npm run dev,则他会运行dev-sever.js文件,之后运行成功,页面自动打开。

Vue.js起步

var app1=new Vue.js({
            el:"#app1",
            data:{
                message:"hahahha"+new Date()
            }
        });

Vue.js 实例化代码可以直接写new Vue.js,也可以赋个值,当实例化的Vue.js赋值给一个变量之后,在控制台可以直接通过改app1.message等代码,在浏览器可以直接看到页面效果。


        
                `todo`.`text`         
var app3 = new Vue.js({
           el:"#app3",
           data:{
                todos:[
                    {text:"aaa"},
                    {text:"bbb"},
                    {text:"ccc"},
                    {text:"ddd"}
                ]
           }
        });

 Vue.js 2.0 学习重点记录

  **这里注意:循环的列表项是加载列表标签li标签上的,不是列表盒子上,在控制台输入

  app3.todos.push({text:"eee"});  //5

  app3.todos.push({text:"fff"}); //6

  页面中会直接显示push进来的列表项,控制台打印出数组的长度

var app4 = new Vue.js({
           el:"#app4",
           data:{
               message:"我要逆转了"
           },
            methods:{
                reverseMsg:function () {
                    this.message=this.message.split("").reverse().join("");
                }
            }
        });

**这里注意:methods方法要加s,否则报错:

  Vue.js 2.0 学习重点记录

父组件向子组件传递数据,使子组件接受一个属性:


        
                         

//定义新组件

        Vue.js.component('hello,{
            props:['todo'],
            template:"
`todo`.`text`
"         });         var app6 = new Vue.js({             el:"#app6",             data:{                 fruits:[                     {text:"apple"},                     {text:"apple2"},                     {text:"apple3"},                     {text:"apple4"}                 ]             }         })

**关键点:使用 v-bind 指令将属性传到每一个重复的组件中,缤纷切让它等于遍历出来的元素。

Vue.js脚手架使用

webstorm eslint配置:推荐一篇文章:

src目录是我们要开发的目录:

assets: 放置一些图片,如logo等。

components: 目录里面放了一个组件文件,可以不用。

App.vue.js: 项目入口文件,我们也可以直接将组建写这里,而不使用 components 目录。

main.js: 项目的核心文件。

**使用要点:在App.Vue.js中导入components组件文件夹下写好的组件,在模板里使用组件,导出默认,导出的名字为模板最外层元素的id或者class名称,components写组件名称;单独的组件写好后也要记得导出默认,导出的名字为模板最外层元素的id或者class名称。[这些都遵循了ES6语法格式]

**在我第一次使用时eslint报错:

 Vue.js 2.0 学习重点记录

错误1:导入的地址必须使用单引号

错误2:在从导出时components属性冒号之后要加空格,再写大括号

错误3:components属性下写组件名称,应该缩进4个空格

错误4:在Apple.vue中多写了个s[个人不细心,此类错误尽量避免]

当这些错误都修改完成之后,页面正常显示出来了:[eslint检查比较严格,如果想要关闭可以自行百度]

 Vue.js 2.0 学习重点记录

Vue.js具体使用

Vue.js 条件

v-if、v-else-if、v-else

条件语句的作用:通过判断不同的条件,显示不同的区块,类似php条件语句的用法,同样可以嵌套v-else-if(2.1.0新增)。

v-show

控制显示隐藏,不支持