vue，跟着我，一起学"/>
第一天的vue，跟着我，一起学
vue简介
官网
1. vue是一种渐进式JavaScript 框架，框架不止这一种，还有react angular两种
2. 他的作者是尤雨溪，由于官网是中文比例占比最大的js框架官网，深受国人喜爱
3. 特点 1. 上手简单,api详细,生态插件丰富2. 脱胎于其他两种框架，所以可以结合angular 指令 react的组件和虚拟dom
使用方法
- 通过js文件进行引入使用
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="@2"></script>- 通过脚手架进行安
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。
NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。
同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
- vue的基本框架(实例化)
var app = new Vue({//选择htmlel: "#app",//内容data: {"msg": "你好世界，你好vue！"}
})
vue的指令
- v-开头特殊html属性
- vue的指令连接了html模板与vue实例数据
- 指令的值是单个htm
v-text="5+8"
v-text="msg.length"
v-text="5>8?'大于':'小于8'"
v-text="msg.split('').reverse().join('')"
- 指令的参数:参数名
v-bind:title="msg"
v-bind:disabled="!can
vue的渲染指令
1.文本渲染指令
- {{}}
- v-text=“指令的值”
- v-html=“含html的文本”
注意要点：v-text和v-html的优先级高于{{}}，即两个都有事高优先级会覆盖低优先级。他们都可以写一些简单的js，比如三元运算符。
2.属性渲染指令
v-bind:title=“msg” // :title=“msg”
格式为 v-bind:属性=“指令”,或者直接简写 :属性=“指令”
3.条件渲染指令
- v-if 表达式为真,节点显示
- v-else-if 多重条件
- v-else 其他
- v-show css方式显示与隐藏节点
<body><div id="app"><h3>条件渲染指令 v-if</h3><p v-if="isLog">现在是true状态</p><p v-else>现在是false状态</p><button @click="dj">点击</button><hr /><input v-model="score" placeholder="你考了多少分啊"/><p v-if="score>=90">优秀</p><p v-else-if="score>=80">良好</p><p v-else-if="score>=70">中等</p><p v-else-if="score>=60">及格</p><p v-else>重修</p><p>v-if和v-show都是隐藏节点，v-show隐藏是通过css进行隐藏</p><p>v-if是通过移除dom节点进行隐藏</p><p>频繁切换用v-show 反之用v-if</p><hr /><h3>v-show</h3><p v-show="can">我是月薪过万的人</p></div><script type="text/javascript">new Vue({el:'#app',data:{can:true,isLog:false,score:60},methods:{dj:function(){this.isLog = !this.isLog}}})</script></body>
面试要点：v-show与v-if区别
v-if和v-show都是隐藏节点，v-show隐藏是通过css进行隐藏
v-if是通过移除dom节点进行隐藏
频繁切换用v-show 反之用v-if
第二天 点我
更多推荐
第一天的vue,跟着我,一起学
发布评论